CSS Border Radius Generator
Generate border-radius values visually. Use one value for all corners or set each corner separately. Choose px or % and copy the CSS instantly.
Preview
CSS
border-radius: 8px; Presets
Table of Contents
What is border-radius?
border-radius is a CSS property that rounds the corners of an element’s border box. You can set one value for all four corners or set each corner separately. Values can be in px or %. Percentages are relative to the element’s size — 50% on a square makes a circle.
Syntax
border-radius: value; (one value for all corners).
border-radius: top-left top-right bottom-right bottom-left; (four values, clockwise from top-left). You can also use two values (top-left & bottom-right, top-right & bottom-left) or three values. Units are px or %.
Use Cases
- Cards and panels — Slightly rounded corners (e.g. 8px) for a modern look.
- Buttons — Small radius for buttons or pill shape (large px or 50%) for pills.
- Avatars and icons —
50%on a square for a circle. - Modals and dropdowns — Rounded top corners only or all corners.
Frequently Asked Questions
Use px for fixed rounding (e.g. 8px on cards). Use % when you want the radius to scale with the element — 50% on a square gives a circle; on a rectangle it gives pill-like ends.
A pill is a rectangle with fully rounded short ends. Use a large value (e.g. 9999px) or 50% so each corner’s radius is at least half the side length, giving semicircular ends.