CSS Border Radius Generator
Create CSS border-radius values visually. Control each corner independently or link them together. Use advanced mode for elliptical corners. Pick from 16 shape presets or fine-tune your own.
Live Preview
CSS Code
border-radius: 16px;Corner Radius
Presets
Frequently Asked Questions
What is CSS border-radius?
The CSS border-radius property rounds the corners of an element. You can set all four corners to the same value for uniform rounding, or control each corner independently. The shorthand accepts 1 to 4 values: one value applies to all corners, two values apply to top-left/bottom-right and top-right/bottom-left, three values apply to top-left, top-right/bottom-left, and bottom-right, and four values apply to each corner clockwise from top-left.
What are elliptical border radii?
Elliptical radii use the slash syntax (e.g. border-radius: 50px 20px / 30px 10px) to set different horizontal and vertical radii for each corner. This creates oval or egg-shaped corners instead of perfect circular arcs. Values before the slash control horizontal curvature, values after control vertical curvature.
How do I make a perfect circle with border-radius?
Set border-radius to 50% on an element with equal width and height. For example: width: 100px; height: 100px; border-radius: 50%. If the element is rectangular, 50% creates an ellipse. For a pill shape on a rectangular element, use a very large pixel value like 9999px.
What units can I use for border-radius?
You can use any CSS length unit: px (pixels) for absolute values, % (percentage) relative to the element's dimensions, em relative to the font size, or rem relative to the root font size. Percentages are most useful for responsive designs since they scale with the element. 50% always creates a circle on a square element regardless of size.