โ˜๏ธ
๐Ÿค๏ธŽ
๐Ÿ’ง
๐Ÿฆ‘
๐Ÿฆ‹
๐Ÿงข

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

Plug & Play

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.

Examples

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>
  );
}
A Squircle with a shadow
const Component = () => {
  return (
    <SmoothCorners
      corners="12, 3"
      style={ width: '160px', height: '50px' }
      as="button"
      borderRadius="10px"
    />
  );
}
Provide two values for different X and Y angles
const Component = () => {
  return (
    <SmoothCorners
      corners="0.6"
      style={ width: '150px', height: '150px' }
    />
  );
}
Values <1 create an inside curve