How does border-radius shorthand work?

When all four corners are equal, a single value suffices, e.g. border-radius: 8px. You can also specify individual corners: border-radius: 4px 8px 12px 16px (top-left, top-right, bottom-right, bottom-left).

Can I create a circle or ellipse with border-radius?

Yes. Setting border-radius to 50% on a square element makes it a circle. You can also use slash notation like border-radius: 50% / 30% to create ellipses.

What units can I use for border-radius?

You can use px, em, rem, %, or any other valid CSS length unit. Percentages are calculated relative to the element's dimensions.

CSS Border Radius Generator

Generate CSS border-radius code with live preview for all four corners.

All Corners12px

CSS

border-radius: 12px;

Related Tools

CSSCSS Box Shadow Generator

Generate CSS box-shadow code with live preview using interactive sliders.

#cCSS Gradient Generator

Generate CSS linear gradient code with live preview and one-click copy.

<->CSS Flexbox Generator

Interactive CSS flexbox playground with live preview and copyable CSS code.

FAQ

How does border-radius shorthand work?: When all four corners are equal, a single value suffices, e.g. border-radius: 8px. You can also specify individual corners: border-radius: 4px 8px 12px 16px (top-left, top-right, bottom-right, bottom-left).
Can I create a circle or ellipse with border-radius?: Yes. Setting border-radius to 50% on a square element makes it a circle. You can also use slash notation like border-radius: 50% / 30% to create ellipses.
What units can I use for border-radius?: You can use px, em, rem, %, or any other valid CSS length unit. Percentages are calculated relative to the element's dimensions.

The CSS Border Radius Generator lets you control the rounding of all four corners of a box — either uniformly or independently. Adjust values with sliders or number inputs, see a live preview, and copy the generated CSS border-radius property instantly.