Use smooth corners in your React application

Leverage the CSS Houdini API and the wopian/smooth-corners npm package to create a rounded corner look for your React elements

npm install react-smooth-corners --save

---

Demo

https://react-smooth-corners.netlify.app/

---

Plug & Play

Import the SmoothCorners component, specify the corners value and let the magic do everything for you ✨ Everything works out of the box and there's no additional setup needed.

1import { SmoothCorners } from 'react-smooth-corners'
2  
3const Button = () => {
4  return (
5    <SmoothCorners
6      corners="12, 3"
7      borderRadius="12px"
8      style={ padding: '10px 30px', background: 'blue' }
9      as="button"
10    >
11      Click to view
12    </SmoothCorners>
13  )
14}

Add a fallback border-radius value for browsers that don't support mask-image.