CSS border-radius Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS border-radius property rounding box corners into soft curves, circles, and elliptical shapes
Definition

Definition and Usage

The border-radius property rounds the corners of an element’s outer border edge. It is a shorthand for border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

One length or percentage makes circular corners. Add a second set after a slash to make elliptical corners. The curve also shapes the background, even when there is no border. It is not inherited. The initial value is 0.

Standard-track.

Not deprecated and not experimental. Widely available since 2015. Pairing with corner-shape (bevel, notch, squircle) is newer and still limited in support.

Syntax

CSS Syntax

syntax.css
border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]? | initial | inherit;

One to four values set each corner. An optional slash adds a second radius for elliptical corners. Negative values are invalid.

Values

Property Values

ValueDescriptionTry it
<length>Corner radius in units such as 15px or 1rem. One value rounds all four cornersTry it
<percentage>Relative to the border box. Horizontal % uses width; vertical % uses height. On a square, 50% is a circleTry it
Two valuesFirst: top-left and bottom-right. Second: top-right and bottom-leftTry it
Four valuesOrder: top-left, top-right, bottom-right, bottom-leftTry it
Slash (/)First list is horizontal radii; second list is vertical radii. Makes elliptical cornersTry it
initialSets this property to its default value, 0Try it
inheritInherits this property from the parent elementTry it
Approach

How to Use border-radius

Give the box a size and a background (or border), then set how much each corner curves.

  1. Pick the element you want to round — a card, button, image wrapper, or avatar.
  2. Set a visible surface: background, border, or both.
  3. Add border-radius with a length, a percentage, or 1–4 corner values.
  4. For elliptical corners, write two lists with a slash: 40px / 20px.
PieceRequired?Role
A box with sizeYesPercentages and circles need real width and height
Background or borderUsuallyMakes the curve visible. No border is still fine
Length or %YesHow far the arc reaches from each corner
overflow: hiddenFor childrenClips images or nested content to the same curve
Try it

Live Preview

One box. Change border-radius and watch the corners update.

The blue box is 200×100. 50% on a rectangle is an ellipse, not a circle.

Result

border-radius: 15px

Code

CSS Examples

Each snippet shows only what border-radius needs: a sized box and a radius. Use Try It Yourself for a live editor.

Example 1 — Uniform Rounded Corners

One length rounds every corner the same amount.

CSS
<style>
  div {
    width: 200px;
    height: 100px;
    background: lightblue;
    border-radius: 15px;
  }
</style>

<div></div>
Try It Yourself

How It Works

  1. Size the box. width and height give the corners a real edge to curve.
  2. Show a surface. background: lightblue makes the rounded shape visible without a border.
  3. Set one radius. border-radius: 15px applies 15px to all four corners.
  4. Read the result. Each corner is a quarter-circle arc. Larger values round more.

Example 2 — Circle with 50%

Equal width and height plus 50% makes a circle.

CSS
<style>
  div {
    width: 80px;
    height: 80px;
    background: #2563eb;
    border-radius: 50%;
  }
</style>

<div></div>
Try It Yourself

How It Works

  1. Make a square. Matching width and height keeps both axes equal.
  2. Use half size. 50% is half the width horizontally and half the height vertically.
  3. The arcs meet. On a square those halves join into a full circle — a common avatar pattern.
  4. Rectangle warning. The same 50% on a non-square box becomes an ellipse.

Example 3 — Elliptical Corners

A slash separates horizontal and vertical radii for oval corners.

CSS
<style>
  div {
    width: 200px;
    height: 100px;
    background: #a7f3d0;
    border: 2px solid #059669;
    border-radius: 40px / 20px;
  }
</style>

<div></div>
Try It Yourself

How It Works

  1. First number is horizontal. 40px is the radius along the width of each corner.
  2. After the slash is vertical. 20px is the radius along the height.
  3. Together they form an ellipse. Unequal radii flatten the curve compared with a single value.
  4. Same as the longhands. This matches setting each corner to 40px 20px.

Edge Cases & Pitfalls

If the corners look wrong, one of these is usually why.

%

50% is a circle only on a square

Percentages follow the box size: width for the horizontal radius, height for the vertical. A rectangle with 50% becomes an ellipse.

clip

Children can stick out past the curve

The background follows the radius. Nested images or text may not. Add overflow: hidden on the rounded parent to clip them.

table

Collapsed table borders ignore it

When border-collapse: collapse, user agents are not required to apply border-radius to the table.

inherit

Shorthand cannot partially inherit

border-radius: 0 0 inherit inherit is invalid for inheritance. Set the longhands, such as border-bottom-left-radius, when only some corners should inherit.

minus

Negative radii are invalid

A negative length or percentage drops the declaration. Use 0 or a positive value.

Compatibility

Browser Support

border-radius is a browser style property for rounding corners. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available since 2015

border-radius

Chrome 4+, Firefox 4+, Safari 5+, Edge 12+, Opera 10.5+, Internet Explorer 9+. Older Safari and Firefox also used -webkit- and -moz- prefixes.

99% Modern browser support
Google Chrome 4+
Full support
Mozilla Firefox 4+
Full support
Apple Safari 5+
Full support
Microsoft Edge 12+
Full support
Opera 10.5+
Full support
Samsung Internet 1+
Full support
Internet Explorer 9+
Full support
border-radius Widely supported

Bottom line: Safe to use without prefixes in current browsers. Prefixes matter only for very old Safari and Firefox. corner-shape is separate and still limited.

Remember

Key Takeaways

  • Role: round the outer corners of a box. Also shapes the background.
  • Shorthand: 1–4 values map to corners like margin. A slash adds elliptical radii.
  • Circles: equal width and height plus 50%. A rectangle makes an ellipse.
  • Initial value: 0. Not inherited. Clip children with overflow: hidden when needed.

One line: border-radius curves each corner — one value for all sides, four for each corner, or a slash for ellipses.

Frequently Asked Questions

It rounds the corners of an element's outer border edge. One radius makes circular corners. Two radii, separated by a slash, make elliptical corners.
The initial value is 0 on every corner, so corners stay square until you set a length or percentage.
On a square box, 50% is half the width and half the height, so the arcs meet as a circle. On a rectangle, 50% makes an ellipse.
One value sets all four corners. Two values set top-left/bottom-right and top-right/bottom-left. Three values set top-left, then the two middle corners, then bottom-right. Four values go top-left, top-right, bottom-right, bottom-left.
No. The curve also clips the background. Use overflow: hidden if you need child content, such as an image, to follow the same curve.
It is Baseline and widely available: Chrome 4+, Firefox 4+, Safari 5+, Edge 12+, Opera 10.5+, and Internet Explorer 9+. It is a browser style property, not a Node.js feature.

Next: border-right

Learn the shorthand for the right edge’s width, style, and color.

border-right tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS border-left-width Property CSS border-right Property