Border-radius - Property CSS
Summary of characteristics of the border-radius
property
0
Computed value
: during an animation, the border-radius
property gradually changes from one value to another.Syntax diagram of border-radius
.
border-radius
property.Click on the diagram for more details on the values.
Download the diagram in SVG.
Legend of the terms used in the diagram below:
length
is a number followed by one of the CSS dimension units, and corresponding to the radius of the rounding.%
It is a percentage calculated in relation to the size of the element.- In each group, one to four values can be listed by separating them with spaces.
Description of the border-radius
property.
The property defines the radius of the corners. In other words, border-radius
allows you to create rectangles with rounded corners.
It is a shorthand property that allows defining the values of the following four properties in a single rule:
border-top-left-radius
: Angle in the top left.border-top-right-radius
: Angle in the top right.border-bottom-left-radius
: Angle in the bottom left.border-bottom-right-radius
: Angle in the bottom right.
- If only one value is specified, it applies to all four corners.
- If two values are specified, the first defines the radius of the top left and bottom right corners; the second value defines the radius of the top right and bottom left corners.
- If three values are specified, the first defines the radius of the top left corner, the second defines the radius of the top right and bottom left corners, and finally, the third value defines the radius of the bottom right corner.
- Finally, when the four values are specified, they correspond respectively to the radius of the angles at the top left, top right, bottom right, and bottom left.

A single value

Four values

Two values

Three values
A second set of values can be specified after a slash character ( /
) allowing for the definition of elliptical rounding (different width and height).
The values before the /
define the widths of the rounding, while the values after the /
define their height.
Note: border-radius
has no effect on table cells when they are adjacent, with the property border-collapse
set to the value collapse;
(see example below)).
Language support.
In some cases, one may wish for the definition of round corners to depend on the writing mode, that is, the language. For example, if one wants to define a rounded corner at the beginning of paragraphs, it will be the top-left corner for Latin languages, but the top-right corner for Arabic languages. The properties below, called "logical", allow for the definition of round corners based on the language of the text. Here is their equivalence with the physical properties for Latin languages.
border-start-start-radius
: start of block, start of line.border-end-start-radius
: end of block, start of line.border-start-end-radius
: start of block, end of line.border-end-end-radius
: end of block, end of line.
⬐ border-top-left-radius
border-bottom-left-radius ⬏
⬐ border-top-right-radius
border-bottom-right-radius ⬏
Values for border-radius
.
- border-radius: 10px;
A numeric value, positive or zero, followed by its unit of measurement (see the CSS dimension units). The radius of the four corners is defined at the indicated value. The default value is 0.
If the unit is an absolute unit of measurement (px
,cm
...), the radius will be a quarter of a circle. - border-radius: 30%;
If the value is expressed as a percentage, the radius will likely be a quarter of an ellipse. Indeed, percentages are calculated relative to the dimensions of the element: its width and height. Unless the element is square, the rounded corners will therefore be elliptical.
- border-radius: 50px; border-radius: 50px 10px; border-radius: 50px 10px 0; border-radius: 50px 10px 0 30px;
From one to four values can be indicated by separating them with a space. Depending on their number, they are associated with the angles of the element as follows:
border-radius:50px;
A single value: it applies equally to all angles.
border-radius:50px 10px;
If two values are specified, the first defines the radius of the angles at the top left and bottom right. The second value defines the radius of the other two angles.
border-radius:50px 10px 0;
Three values: the first defines the radius of the first angle (top left). The second value defines the radius of the second and fourth angles, and the third value defines the radius of the last angle (bottom right).
border-radius:50px 20px 0 30px;
Four values separated by a space: each defines the radius of one of the corners, starting with the corner at the top left and turning clockwise.
- border-radius: 50px / 25px; a b
The slash character (
/
) introduces a second series of values. Each rounded corner can then be a quarter of an ellipse, with the value before the/
indicating the width of the ellipse, while the value after the/
indicates its height. - border-radius: 30px 0 / 50px 0;
From one to four values can be listed before and after the slash. The rules for assigning them to each of the angles remain the same.
Values common to all properties:
border-radius: initial (0
)
border-radius: inherit
border-radius: revert
border-radius: revertLayer
border-radius: unset
Common values are presented on these pages: initial
, inherit
, revert
, revert-layer
, unset
.
Special cases.
Conflict with scroll bars.
Avoid rounded corners if scroll bars are expected: some browsers remove the rounding, while others display unsightly things.
It is by starting to break the first angle of a square that one can create a circle.
The fish is an animal with square corners that lives in freezers.
Thick borders.
The radius defined by border-radius
is the outer radius. If the border is thick enough, the inner edge of the stroke may not be rounded.
Radius of the upper rounding to one of the dimensions of the element.
In the first example below, we requested a radius of 200 pixels for each corner. This is not possible given the height of the element (40 pixels). We can see that the browser has reduced the radius of the round corners while still maintaining quarter circles, even though a 200-pixel round corner would have been possible in terms of width.
In this second example, the requested radii are 100 pixels and 20 pixels. The browser cannot fit 100 pixels into the height. Therefore, it reduced this radius. However, it also reduced the 20-pixel radius by the same proportions to maintain the overall appearance, even though the 20-pixel radius could have been accommodated in the height of the element.
Borders of different widths.
If the borders do not have the same width, and they connect with a curve, the thickness of the line is supposed to gradually evolve from the narrowest to the widest over the distance of the curve.
Borders in different colors.
Unlike thickness, color does not vary gradient-wise over the distance of the curve, but instead shifts abruptly from one color to another along a diagonal break.
Effect of border-radius
on the tables.
Rounded corners are applied to tables and cells only if the table's border-collapse
property has the value separate
.
This is the case for the first of the two tables below.
Cell | Cell | Cell |
Cell | Cell | Cell |
Cell | Cell | Cell |
Cell | Cell | Cell |
Example: obtain a round image.
In this example, the image is a background image but it would be easy to achieve a similar effect with an img tag.
Animation of the border-radius
property.
The property border-radius
can easily be animated, whether with a single value or with the syntax with multiple values (two values in the example below).
Manipulating the border-radius
property programmatically.
Change the rounding of angles in Javascript.
The code below defines a 20-pixel rounding for each of the corners. Two syntaxes are possible: with the property name written in kebab-case
or in camel-case
.

let el = document.getElementById('id');
el.style['border-radius'] = '20px';
// or
let el = document.getElementById('id');
el.style.borderRadius = '20px';
Read in Javascript the value of the rounding of the angles.
The code below retrieves the value of the property border-radius
if it has been set via the style
attribute of the element.
Values assigned through a CSS selector are not taken into account by this code.

let el = document.getElementById('id');
let value = el.style['border-radius'];
// or
let el = document.getElementById('id');
let value = el.style.borderRadius;
LRead the computed value of border-radius
in Javascript.
The computed value is either the one that has been assigned to border-radius
directly on the element (through the style
attribute
or via a CSS selector), or an inherited value, or even the initial value of the property (0
in the case of border-radius
).
In any case, the computed value is always defined.
The calculated value is returned in pixels regardless of the unit used to define it, except for percentages which are retained as such.

let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('border-radius');
Modify the value of the property border-radius
with jQuery.
Here too, two syntaxes are possible: with the property name in kebab-case
or in camel-case
.

$('#id').css('border-radius', '20px');
// or
$('#id').css('borderRadius', '20px');
Get the calculated value of the property border-radius
using JQuery.

let value = $('#id').css('border-radius');
Other codes.
Other code examples are provided on the page Javascript and CSS.
Test it yourself.
The buttons below apply the entered value to the property border-radius
and then display either the value as it has been applied or the calculated value.
This second option allows you to see how the value of border-radius
is stored (serialized). In particular, it is noted that percentages are indeed stored
as percentages and that all other units are converted to pixels.
Simulator.
Browsers compatibility with border-radius
.
The management of rounded corners, and thus the property border-radius
is now correct on all browsers.
border-radius
property for drawing rounded corners.border-radius
logiques (prenant en charge le mode d'écriture de la langue).border-radius
(physical properties)
border-radius
(logical properties)
percentages
corners
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini
Historic of the border-radius
property.
-
CSS Backgrounds and Borders Module Level 3
Introduction to the specification of corner roundings, and the properties to define them, including the shorthand propertyborder-radius
.August 02, 2002Working Draft.December 17, 2009Candidate Recommendation.
See also, regarding the borders.
The specification of W3C CSS Backgrounds and Borders Module encompasses everything related to borders and backgrounds, which represents quite a lot. To facilitate your searches, we list below the main properties described in this standard.
Properties:




















