Border-radius - Property CSS

border-radius

Summary of characteristics of the border-radius property

Quick description
Radius of rounded corners.
Status
Standard
Usable for
HTML
Percentages
Calculated relative to the dimension of the element.
Initial value
0
Inherited by default
No.
Animation type
Computed value : during an animation, the border-radius property gradually changes from one value to another.
W3C Module
CSS Backgrounds and Borders Module
References (W3C)
Document status: CR (Candidate Recommendation)

Syntax diagram of border-radius.

border-radius - Syntax DiagramSyntax diagram of the border-radius CSS property. See stylescss.free.fr for details. length length % % {1,4} {1,4} / / length length % % {1,4} {1,4}border-radius;border-radius;
Syntax diagram of the 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.
Border-radiuswith a single value
A single value
Border-radius with four values
Four values
Border-radius with two values
Two values
Border-radius with three 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 ⬏
The direction and writing mode of this text adapt to the chosen language.
⬐ 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

  • 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.

The square is a triangle that has succeeded, or a circumference that has gone wrong... (Pierre Dac)
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.

By always trying to smooth things over, we end up going around in circles.

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.

To make things run smoothly, you have to be straightforward.

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.

To make things run smoothly, you have to be straightforward.

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.

CellCellCell
CellCellCell
CellCellCell
CellCellCell

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.

Javascript
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.

Javascript
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.

Javascript
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.

JQuery

$('#id').css('border-radius', '20px');
// or
$('#id').css('borderRadius', '20px');

Get the calculated value of the property border-radius using JQuery.

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.

border-radius :

Browsers compatibility with border-radius.

The management of rounded corners, and thus the property border-radius is now correct on all browsers.

Column 1
Support for the border-radius property for drawing rounded corners.
Column 2
Prise en charges par les navigateurs des propriétés border-radius logiques (prenant en charge le mode d'écriture de la langue).
Column 3
Support for percentages used to define rounding dimensions.
Column 4
Support for the ability to specify two dimensions for each of the angles, giving them an elliptical shape.
1
border-radius
(physical properties)
2
border-radius
(logical properties)
3
Values in
percentages
4
Elliptical
corners
Estimated overall support.
98%
95%
97%
97%

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 property border-radius.
    WD
    August 02, 2002
    Working Draft.
    CR
    December 17, 2009
    Candidate Recommendation.
    PR
    REC

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:

background
Summary of background properties.
background-attachment
Langue française
Background image scrolling mode.
background-clip
Langue française
Defines the extent of the background, especially in relation to the border and padding.
background-color
Sets the background color.
background-image
Defines the background image or gradient (multiple images or gradients can coexist).
background-origin
Defines a reference to position the background image.
background-position
Langue française
Defines how the background image is positioned.
background-position-x
Langue française
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
background-position-y
Langue française
Defines how the background image is positioned in the vertical direction,
background-repeat
Langue française
Defines how the background image is repeated.
background-size
Langue française
Sizing the background image.
border
Langue française
A shorthand property that defines the set of border parameters.
border-bottom-left-radius
Langue française
Sets the radius of the rounded corner at the bottom left.
border-bottom-right-radius
Langue française
Sets the radius of the rounded corner in the lower right.
border-color
Langue française
Sets the color of the borders.
border-image
Langue française
Shorthand of border properties made with images.
border-image-outset
Langue française
Sets the overflow of the border image.
border-image-repeat
Langue française
Defines how the border image is repeated or expanded to cover the desired area.
border-image-slice
Langue française
Defines how the border image is clipped.
border-image-source
Langue française
Defines the image used to construct the border.
border-image-width
Langue française
Sets the thickness of the border when the border is made with an image.
border-style
Langue française
Type of border (solid, double, dotted...).
border-top-left-radius
Langue française
Sets the radius of the rounded corner at the top left.
border-top-right-radius
Langue française
Sets the radius of the rounded corner in the upper-right.
border-width
Langue française
Sets the thickness of the element's border.
box-shadow
Applies a shading effect to the frames by indicating all the parameters: color, shadow shift, blur, etc.