Border Radius Generator – Visual CSS Corner Maker

Set rounded corners visually, copy the CSS in one click

Drag a slider, watch the shape update live, then grab the border-radius CSS line and paste it straight into your stylesheet. No mental arithmetic, no trial-and-error refreshing the browser.

The shorthand you're building looks like this:

border-radius: top-left top-right bottom-right bottom-left;

Set all four values to 50% and you get a perfect circle (or an ellipse if the element isn't square). Any other mix of values gives you asymmetric, pill, or squircle shapes.

How to use the border radius generator

1. Adjust the sliders – each one controls one corner (top-left, top-right, bottom-right, bottom-left).
2. Watch the live preview – the box updates instantly so you see exactly what your visitors will see.
3. Switch units if you need to – choose px for fixed sizes or % for fluid, responsive designs.
4. Copy the CSS – hit the copy button and paste the rule into your stylesheet or CSS-in-JS component.

Worked example – a card with soft corners

Say you want a content card with gently rounded top corners and sharper bottom corners – common for tab panels or pricing cards.

Sliders set to: top-left 12px, top-right 12px, bottom-right 4px, bottom-left 4px

Output CSS:

border-radius: 12px 12px 4px 4px;

Paste that onto your .card class and you're done. Want a pill button instead? Set all four corners to 50px (or higher than half the element height) and the generator will produce:

border-radius: 50px;

How to apply border-radius in code

Once you have the value from the generator, dropping it into your project takes one line in any language or framework.

Plain CSS / SCSS

/* CSS */
.card {
  border-radius: 12px 12px 4px 4px;
}

/* SCSS variable example */
$radius-top: 12px;
$radius-bottom: 4px;

.card {
  border-radius: $radius-top $radius-top $radius-bottom $radius-bottom;
}

JavaScript (inline style or CSS-in-JS)

// Vanilla JS inline style
document.querySelector('.card').style.borderRadius = '12px 12px 4px 4px';

// React / styled-components
const Card = styled.div`
  border-radius: 12px 12px 4px 4px;
`;

Tailwind CSS – if your values match Tailwind's scale, use a utility class like rounded-xl. For custom values, add them to tailwind.config.js under borderRadius or use the arbitrary-value syntax: rounded-[12px_12px_4px_4px].

How it works under the hood

The generator reads each slider value, formats them as a valid CSS shorthand, and renders the shape using the browser's own CSS engine – no canvas drawing, no images. Redundant values are collapsed automatically: if all four corners match, you get border-radius: 12px instead of border-radius: 12px 12px 12px 12px.

The border-radius property follows the CSS Backgrounds and Borders Module Level 3 spec (W3C). MDN's border-radius reference is the best bookmark for advanced syntax like the elliptical / notation.

Your data never leaves your browser. Everything runs locally in JavaScript – no values are uploaded to any server.

When to use this tool (and when not to)

Quick tips for common shapes

• Circle: all corners at 50% on a square element
• Pill / capsule: all corners at a value larger than half the element's height (e.g. 100px on a 40px-tall button)
• Squircle feel: try 30% on all corners – popular in iOS-style icon designs
• Tab shape: top corners rounded (8px), bottom corners at 0
• Speech bubble base: three rounded corners, one at 0

Set your corners visually above, copy the single CSS line, and ship it. The border radius generator above does all the maths so you can focus on the design.