GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing developer.mozilla.org — border-radius CSS property - CSS | MDN

`border-radius` CSS property

Baseline

Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

See full compatibility
Learn more

The border-radius CSS shorthand property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Try it

border-radius: 30px;

border-radius: 25% 10%;

border-radius: 10% 30% 50% 70%;

border-radius: 10% / 50%;

border-radius: 10px 100px / 120px;

border-radius: 50% 20% / 10% 40%;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with rounded corners.
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css

/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;

The border-radius property is specified as:

one, two, three, or four <length> or <percentage> values. This is used to set a single radius for the corners.
followed optionally by "/" and one, two, three, or four <length> or <percentage> values. This is used to set an additional radius, so you can have elliptical corners.

Values

A light blue rectangle with a light gray border. All 4 corners are rounded.

A light blue rectangle with a light gray border. The 2 corners on the top left and the bottom right have are rounded.

<length>: Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.
<percentage>: Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

For example:

css

border-radius: 1em / 5em;

/* It is equivalent to: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;

css

border-radius: 4px 3px 6px / 2px 4px;

/* It is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

Description

The radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

The border-radius property does not apply to table elements when border-collapse is collapse.

Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit, which would partially override existing definitions. Instead, the individual longhand properties have to be used.

Formal definition

Initial value	as each of the properties of the shorthand: `border-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
Applies to	all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`.
Inherited	no
Percentages	refer to the corresponding dimension of the border box
Computed value	as each of the properties of the shorthand: `border-top-left-radius`: two absolute `<length>`s or `<percentage>`s `border-top-right-radius`: two absolute `<length>`s or `<percentage>`s `border-bottom-right-radius`: two absolute `<length>`s or `<percentage>`s `border-bottom-left-radius`: two absolute `<length>`s or `<percentage>`s
Animation type	as each of the properties of the shorthand: `border-top-left-radius`: a length, percentage or calc(); `border-top-right-radius`: a length, percentage or calc(); `border-bottom-right-radius`: a length, percentage or calc(); `border-bottom-left-radius`: a length, percentage or calc();

Formal syntax

border-radius = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Examples

Comparing border styles

The following example has seven <pre> elements, each of which demonstrates combinations of border and border-radius styles. The styles applied to each <pre> element are included as the element's contents, so you can see the CSS declarations necessary to create the associated border style:

<pre id="example-1">
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
</pre>

<pre id="example-2">
  border: groove 1em red;
  border-radius: 2em;
</pre>

<pre id="example-3">
  background: gold;
  border: ridge gold;
  border-radius: 13em / 3em;
</pre>

<pre id="example-4">
  border: none;
  border-radius: 40px 10px;
  background: gold;
</pre>

<pre id="example-5">
  border: none;
  border-radius: 50%;
  background: burlywood;
</pre>

<pre id="example-6">
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
</pre>

<pre id="example-7">
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
</pre>

pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 50px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em / 3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}

Using `corner-shape` with `border-radius`

When a non-0 border-radius value is applied to a box corner, you can use the corner-shape property (or one of its longhands and shorthands) to apply custom shapes to that corner, such as a bevel, notch, or squircle. This example demonstrates corner-shape usage.

HTML

The markup for this example contains a single <div> element.

html

<div></div>

CSS

We give the box some basic styles, which we've hidden for brevity. We also apply a box-shadow, a border-radius of 0 20% 50px 30%, and a corner-shape of superellipse(0.5) bevel notch squircle.

body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

css

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 0 20% 50px 30%;
  corner-shape: superellipse(0.5) bevel notch squircle;
}

Result

The rendered result looks like this:

Note how no corner shape is applied to the top-left corner, because it has a border-radius of 0 set.

Specifications

Specification
CSS Backgrounds and Borders Module Level 3 # propdef-border-radius

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Aug 27, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.