Softonic

CSS Border Radius Generator

Step 1 / 2 Generate CSS
Results

border-radius looks simple until you try to explain why 50% on a square gives a circle but 50% on a rectangle gives an oval. This generator lets you enter a value for each of the four corners, choose between px, % and rem, and copy the exact shorthand it produces. Useful for button shapes, card corners, pill buttons and asymmetric corners.

How to build a border-radius

  1. 1

    Set each corner

    Enter a radius for the top-left, top-right, bottom-right and bottom-left corners.

  2. 2

    Choose the unit

    Pixels (fixed size), percent (relative to the element) or rem (relative to the root font size).

  3. 3

    Generate the CSS

    Press Generate CSS to build the shorthand rule.

  4. 4

    Copy the rule

    Copy the `border-radius` shorthand and paste it into your stylesheet.

Shorthand order

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

Same as margin/padding: clockwise starting top-left. Omitted values mirror the opposite corner. So border-radius: 10px 20px; means 10px top-left and bottom-right, 20px top-right and bottom-left.

What this generator does not do

It sets one radius per corner, so it never produces elliptical corners (the two-value slash form such as border-radius: 20px 10px / 5px 15px;) or the longhand border-top-left-radius properties. If you need those, write the CSS by hand.

Percent vs. pixels

Unit Behaviour
px Fixed, does not scale with element size
% Percentage of element width (horizontal) and height (vertical)
em Scales with font-size of the element
rem Scales with root font-size

50% on a square element = circle. On a 200x100 rectangle, 50% = 100px radius horizontal + 50px vertical = ellipse.

Common shapes

Shape CSS
Circle (square) border-radius: 50%;
Pill border-radius: 9999px; (any value >= half height)
Rounded card border-radius: 8px; or 12px
Chat bubble border-radius: 18px 18px 0 18px; (tail on bottom-right)
Subtle border-radius: 2px; or 4px

The “half the height” rule for pills

A pill button is a rectangle where the horizontal caps are perfect semicircles. To get that reliably, set border-radius to at least half the element’s height. Using 9999px (or any very large value) is safe because the browser clamps the radius to the actual geometry.

Interaction with overflow

border-radius only clips the background, border and box-shadow by default. To clip child elements (images, nested elements) to the rounded shape, add:

overflow: hidden;

or use isolation: isolate + overflow: hidden to also contain stacking contexts.

Accessibility note

There is no accessibility issue with border-radius itself, but extreme rounding on interactive elements (pills, chips) should not shrink the tap target. Keep buttons at least 44x44 px (WCAG recommendation) regardless of corner rounding.

Frequently Asked Questions

Because percentage border-radius is measured as “% of width” horizontally and “% of height” vertically, on a non-square element this produces an ellipse. For a circle, the element must be square, or use pixel values that match the element’s dimensions.

Only the background, border and box-shadow by default. Child elements are not clipped unless you also add overflow: hidden to the parent.

It is animatable between numeric values: transition: border-radius 200ms; works for pixel and percentage. Animating between a complex elliptical shorthand and a simple radius can produce surprising intermediate frames; test and simplify the start/end states if it looks odd.

The spec does not set a cap, but browsers clamp the effective radius to half the shorter edge of the element. Using border-radius: 9999px on a 40px tall button produces a pill, the browser clamps to 20px silently.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.