A tab with a rounded top
12 px on the top corners and 0 on the bottom: border-radius: 12px 12px 0 0;
Border Radius Generator
Round the corners of a box together or one by one, and get the shortest CSS.
CSS
border-radius: 16px;Runs in your browser — nothing you enter is sent to a server.
How the Border Radius Generator works
Round all four corners with one slider, or untick Same for all corners to set each one. Choose pixels, percent or rem. The preview shows the shape and the CSS below uses the shortest form of border-radius.
The corners are always listed clockwise from the top left: top left, top right, bottom right, bottom left. When values repeat, CSS lets you write fewer: one value for all corners, two for diagonal pairs, three when the top right and bottom left match.
Examples
Shortest forms
8, 0, 8, 0 is written 8px 0; 8, 4, 2, 4 is written 8px 4px 2px; 50% on every corner is 50%.
Frequently asked questions
How do I make a circle?
Use 50% on a square element. On a rectangle, 50% gives an ellipse. Values above 50% change nothing, so the tool stops there.
How do I make a pill-shaped button?
Use a pixel value larger than half the button's height, such as 999px: the corners round fully whatever the height.
px, % or rem?
px for fixed corners, rem to scale with text size, % to stay in proportion to the element (and to make circles).
Related tools
Box Shadow Generator
Build layered CSS box shadows with sliders and a live preview, including inner shadows.
Design Tools
Aspect Ratio Calculator
Find the aspect ratio of any size (1920 × 1080 is 16:9) and resize while keeping it.
Design Tools
CSS Gradient Generator
Design linear, radial and conic CSS gradients with a live preview and copy the CSS.
Design Tools