superround

A JavaScript library for improved rounded corners

npm install @superround/vanilla

superround is a JavaScript library that provides improved rounded corners for DOM Elements. It lets you create beautiful and responsive shapes using different methods of curve generation. You can choose from quadratic Bézier curves, cubic Bézier curves, or super ellipses, depending on your needs and preferences. It also supports animations and shadows for extra flair.

Here are some examples of what you can do with SuperRound:

Quadratic Bézier curves: They’re not square, they’re radical.

Quadratic Bézier curves are perfect for when you want to keep things simple and smooth. They are easy to use and fast to render. They can create subtle or dramatic curves, depending on how you tweak the control point. Whether you want to make a button, a card, or a logo, quadratic Bézier curves can handle it.

Be cubic. Be dynamic. Be iconic.

Cubic Bézier curves are ideal for when you want to unleash your creativity and flexibility. They are more powerful and versatile than quadratic Bézier curves. They can create smooth or sharp corners, convex or concave shapes, symmetrical or asymmetrical forms. You can even make loops and spirals with them. The only limit is your imagination. Just be careful not to overdo it, or you might end up with something that looks like a pretzel.