CSS Tools
CSS Border Radius Generator
Round corners visually. Lock all four to the same value or dial each one in individually. Switch between px and % and copy the result instantly.
border-radius: 12px;
How border-radius works
border-radius accepts one to four values. With one value all corners get the same radius. With four values it goes top-left, top-right, bottom-right, bottom-left clockwise.
border-radius: 12px;border-radius: 8px 16px 8px 16px;border-radius: 50%;Frequently asked questions
What is border-radius?
border-radius rounds the corners of an element. A value of 50% on a square element makes a circle.
Can I round individual corners?
Yes. border-radius: tl tr br bl lets you set each corner independently — top-left, top-right, bottom-right, bottom-left.
What is the difference between px and %?
px is an absolute size regardless of element size. % is relative to the element's dimensions. 50% on a square creates a perfect circle.
How do I make a pill shape?
Set border-radius to 9999px (or any very large value). The browser clips it to the maximum that fits, producing a pill.