Package detail

border-gradient-radius

shivanshBTW466MIT1.2.5

A React component for creating gradient borders with border radius

react, border, gradient, radius, curved, border-radius, border-gradient, border-gradient-radius, gradient-border, curved-border, react-border, react-gradient, react-radius, react-curved, react-border-radius, react-border-gradient-radius, react-gradient-border, react, nextjs, border, gradient, radius, css, styled

readme

border-gradient-radius

A React component for creating gradient borders with customizable border radius.

Installation

npm install border-gradient-radius
# or
yarn add border-gradient-radius

Usage

import { BorderRadiusGradient } from 'border-gradient-radius';

function App() {
  return (
    <BorderRadiusGradient
      gradientValue="linear-gradient(45deg, #f3ec78, #af4261)"
      borderRadius="10px"
      borderWidth="2px"
      className="custom-class"
    >
      <div style={{ padding: '20px' }}>Your content here</div>
    </BorderRadiusGradient>
  );
}

Props

Prop	Type	Default	Description
containerBackgroundColor	string	"#FFF"	Background color of the container
gradientValue	string	""	CSS gradient value for the border
children	React.ReactNode	undefined	Content to render inside the container
className	string	""	Additional CSS classes
borderWidth	string	""	Border width (e.g., "1px", "2px")
borderRadius	string	""	Border radius (e.g., "10px", "50%")

License

MIT