Don't like ads? Go Ad-Free Today

Border Radius Generator

ColorDeveloper
ADVERTISEMENT · REMOVE?

Mode


Unit


Radius


Vertical Radius (Elliptical)


Preview Colors

Live Preview
20px 20px 20px 20px
Presets
None
Rounded
Circle
Pill
Squircle
Blob
Drop
Message
ADVERTISEMENT · REMOVE?

Guide

CSS Border Radius Generator

Visually design rounded corners for your CSS elements. Adjust each corner independently, use elliptical radii, pick from presets, and copy the CSS code — all with a live preview.

How to Use

Choose simple mode to set all corners at once, or switch to advanced mode for individual corner control. Enable elliptical mode for separate horizontal and vertical radii. Use the presets gallery for common shapes like circles, pills, and squircles. Copy the generated CSS when you are happy with the result.

Features

  • Simple & Advanced Mode – Uniform corners or individual control for each corner
  • Elliptical Radius – Set separate horizontal and vertical radii per corner for complex shapes
  • Unit Selection – Switch between px, %, em, and rem
  • Presets Gallery – Circle, pill, rounded card, squircle, organic blob, speech bubble, and more
  • Live Preview – See your border radius applied to a preview box in real time
  • Copy CSS – One-click copy of optimized CSS shorthand

ADVERTISEMENT · REMOVE?
Want To enjoy an ad-free experience? Go Ad-Free Today

Install Our Extensions

Add IO tools to your favorite browser for instant access and faster searching

Add to Chrome Extension Add to Edge Extension Add to Firefox Extension Add to Opera Extension

Scoreboard Has Arrived!

Scoreboard is a fun way to keep track of your games, all data is stored in your browser. More features are coming soon!

ADVERTISEMENT · REMOVE?
ADVERTISEMENT · REMOVE?
ADVERTISEMENT · REMOVE?

News Corner w/ Tech Highlights

Get Involved

Help us continue providing valuable free tools

Buy me a coffee
ADVERTISEMENT · REMOVE?