npm install react-smooth-corners --save
Import the SmoothCorners component, specify the corners value and let the magic do everything for you โจ
import { SmoothCorners } from 'react-smooth-corners'
const Button = () => {
return (
<SmoothCorners
corners="12, 3"
borderRadius="12px"
style={ padding: '10px 30px', background: 'blue' }
as="button"
>
Click to view
</SmoothCorners>
)
}
Add a fallback border-radius value for browsers that don't support mask-image
and/or CSS Paint Worklet
.
const Component = () => {
return (
<SmoothCorners
corners="3"
style={ width: '80px', height: '80px' }
borderRadius="25px"
/>
);
}
const Component = () => {
return (
<SmoothCornersWrapper
corners="5"
borderRadius="20px"
shadow="0 15px 20px rgb(48, 48, 187, 0.4)"
>
<SmoothCorners
corners="5"
style={ width: '170px', height: '170px' }
borderRadius="20px"
/>
</SmoothCornersWrapper>
);
}
const Component = () => {
return (
<SmoothCorners
corners="12, 3"
style={ width: '160px', height: '50px' }
as="button"
borderRadius="10px"
/>
);
}
const Component = () => {
return (
<SmoothCorners
corners="0.6"
style={ width: '150px', height: '150px' }
/>
);
}