Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Border Radius Generator

Round each corner with sliders and a live preview, then copy the exact CSS. Link all corners together or set elliptical radii.

Preview
Options
Corners
CSS
border-radius: 24px;

Everything is generated in your browser. Nothing is uploaded.

How to make a CSS border radius

  1. Set the corner radius

    Drag a slider to round the corners of the preview box, and with Link all corners on, one slider controls all four at once.

  2. Round each corner

    Turn off Link all corners to give the top-left, top-right, bottom-right, and bottom-left corners their own radius.

  3. Switch units or go elliptical

    Pick pixels, percent, em, or rem, then toggle Elliptical corners to set a separate horizontal and vertical radius for each corner.

  4. Copy the CSS

    The border-radius declaration under the preview updates as you drag, so click Copy CSS to paste it into your stylesheet.

Why use this tool

One slider per corner

Round all four corners together, or unlink them to give the top-left, top-right, bottom-right, and bottom-left corners their own radius.

Elliptical corners

Switch on elliptical mode to set a separate horizontal and vertical radius per corner, the two-axis form written with a slash in CSS.

Pixels, percent, em, or rem

Choose the unit that fits your layout. Percent scales the radius to the box size and is how you turn a square into a circle.

Live preview as you drag

The preview box restyles on every slider move, so you judge the shape by eye rather than by numbers.

Shortest valid shorthand

The output collapses to the shortest correct border-radius, from a single value when every corner matches up to the full four-value form.

Runs entirely in your browser

The CSS is generated on your device; nothing is uploaded, and there is no account or server.

About this tool

This border radius generator writes the CSS border-radius property from a set of sliders and a live preview. Start with Link all corners on and a single slider rounds the whole box; turn it off and each corner, top-left, top-right, bottom-right, and bottom-left, takes its own value. The preview repaints on every movement and the code block below is built from the same values, so the CSS you copy is exactly the shape on screen. The output is reduced to the shortest valid form: a single value when every corner matches, and the full four-value list only when they differ.

Radius units matter as much as the numbers. Pixels give a fixed rounding, percent scales with the element and is how a square becomes a circle at 50 percent, and em or rem tie the radius to your type scale. Switch the unit and every slider re-scales to a sensible range. Turn on Elliptical corners when a simple round is not enough: each corner then carries a horizontal and a vertical radius, written in CSS as two lists separated by a slash, which is how you draw stretched or leaf-shaped corners. For the fill and depth that sit inside those corners, the CSS gradient generator and CSS box shadow generator cover the rest of the element.

Nothing is uploaded and there is no account; the preview and the CSS exist only in your browser tab. When a radius color or the surrounding palette needs adjusting, the color converter moves a value between HEX, RGB, and HSL without leaving the page.

Frequently asked questions

How do I round the corners?
Drag the sliders. With Link all corners on, one slider rounds all four corners at once; turn it off to set the top-left, top-right, bottom-right, and bottom-left corners separately. The preview and the CSS update live as you drag.
What are elliptical corners?
An elliptical corner has a different horizontal and vertical radius, so it stretches into an oval curve instead of a quarter-circle. Toggle Elliptical corners and each corner gains a second slider; in CSS the two axes are written as two value lists separated by a slash.
Which units can I use?
Pixels, percent, em, and rem. Percent is measured against the box size, so 50 percent on every corner turns a square into a circle, while pixels give a fixed rounding no matter the element size.
How do I make a circle or pill shape?
Set the unit to percent and every corner to 50 percent for a circle from a square, or a pill from a rectangle. A large pixel value on all corners of a wide box gives the same stadium shape.
How do I use the generated CSS?
Copy the CSS and paste the border-radius declaration onto the element in your stylesheet. The output is a complete declaration ending in a semicolon, so it drops straight into any rule.
Is anything uploaded to a server?
No. The preview is rendered and the CSS is generated in your browser. Nothing is sent anywhere, stored, or logged.

Related tools