Border Radius Visualizer
Design complex border-radius values visually. Adjust each corner independently, use elliptical radii for organic shapes, pick from presets, and copy production-ready CSS.
border-radius: 0px;
How It Works
- Adjust individual corner sliders or link them together
- Toggle elliptical mode for independent horizontal/vertical radii
- Choose a unit (px, %, rem, em) that matches your project
- Pick a preset for quick starting points
- Copy the generated CSS for your stylesheet
Features
- Independent control of all 4 corners
- Elliptical radii (horizontal / vertical per corner)
- 16 shape presets with live preview
- 4 CSS units: px, %, rem, em
- Linked corners mode for uniform editing
- Resizable preview box with custom fill color
- One-click copy of production CSS
- Responsive, works on mobile and desktop
What is CSS border-radius and how does it work?
The CSS border-radius property defines how rounded the corners of an element are. You can set a single value for all corners or provide individual values for top-left, top-right, bottom-right, and bottom-left. Values can be in px, %, rem, or em. A value of 50% on a square element creates a perfect circle.
How do I make a circle or pill shape with border-radius?
To create a circle, set border-radius to 50% on a square element (equal width and height). For a pill or capsule shape, use border-radius with a value of 9999px (or 50%) on a rectangular element where the width is greater than the height. The radius will automatically cap at half the shorter side.
What is the difference between symmetric and elliptical border-radius?
Symmetric border-radius uses a single value per corner, creating quarter-circle curves. Elliptical border-radius uses two values per corner separated by a slash (horizontal / vertical), creating elliptical curves. This lets you build organic blob shapes, teardrop forms, and other asymmetric designs that symmetric radii cannot achieve.
Which CSS unit should I use for border-radius: px, %, rem, or em?
Use px for fixed-size elements where you want consistent rounding regardless of font size. Use % for responsive shapes that scale with the element (50% is the standard for circles). Use rem for designs that respect the root font size for consistent scaling across components. Use em when the radius should scale with the local font size of the element.
Can I use border-radius shorthand for individual corners?
Yes. The shorthand border-radius accepts 1 to 4 values: one value applies to all corners, two values set top-left/bottom-right and top-right/bottom-left, three values set top-left, top-right/bottom-left, and bottom-right, and four values set each corner individually in clockwise order starting from top-left. You can also use longhand properties like border-top-left-radius for a single corner.