CSS Border-radius

border-radius

The border-radius shorthand property sets the rounding of the corners of the element.

This property can accept from one to four values.

border-radius: [top-left][top-right][bottom-right][bottom-left]

If all four values are provided, the radius applied to the corners are as specified.

border-radius: [top-left][top-right / bottom-left][bottom-right]

If three values are provided, the second value applies to top-right and bottom-left.

border-radius: [top-left / bottom-right][top-right / bottom-left]

If two values are provided, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.

border-radius: [top-left / top-right / bottom-right / bottom-left]

If one value is provided, the radius applies to all 4 corners.

Property Values

Value Description
length Specifies the length of the corner radius
percentage Specifies the length of the corner radius in percent (percentages refer to the corresponding dimensions of the border box)

Examples

The following example shows the basic use of this property:

<pre style="border:solid 1px black;
  border-radius:2em;">
border:solid 1px black;
border-radius:2em;
</pre>

This produces the following result:

  border:solid 1px black;
  border-radius:2em;

The following examples show some various corner radius values:

border:solid 1px black;
  border-radius:
    1em 4em 1em 4em;
border:solid 1px black;
  border-radius:
    25px 10px / 10px 25px;

Border-top-left-radius

The border-top-left-radius property sets the rounding of the top-left corner of the element.

This property has the following syntax:

border-top-left-radius: length|% [ length|% ];

When two values are supplied, they define the horizontal and vertical radii of a quarter ellipse, which determines the curvature of the corner of the outer border edge.

When only one value is supplied, it is used to define both the horizontal and vertical radii equally.

Note: If either value is zero, the corner will be square.

Examples

The following example shows the basic use of this property:

<pre style="border:solid 1px black;
  border-top-left-radius:2em;">
border:solid 1px black;
border-top-left-radius:2em;
</pre>

This produces the following result:

border:solid 1px black;
    border-top-left-radius:
      2em;

The following examples show some various corner radius values:

border:solid 1px black;
  border-top-left-radius:
    20px;
border:solid 1px black;
  border-top-left-radius:
    20px 20px;
border:solid 1px black;
  border-top-left-radius:
    20px 40px;
border:solid 1px black;
  border-top-left-radius:
    40px 20px;

Border-top-right-radius

The border-top-right-radius property sets the rounding of the top-right corner of the element.

This property has the following syntax:

border-top-right-radius: length|% [ length|% ];

When two values are supplied, they define the horizontal and vertical radii of a quarter ellipse, which determines the curvature of the corner of the outer border edge.

When only one value is supplied, it is used to define both the horizontal and vertical radii equally.

Note: If either value is zero, the corner will be square.

Examples

The following example shows the basic use of this property:

<pre style="border:solid 1px black;
  border-top-right-radius:2em;">
border:solid 1px black;
border-top-right-radius:2em;
</pre>

This produces the following result:

border:solid 1px black;
    border-top-right-radius:
      2em;

The following examples show some various corner radius values:

border:solid 1px black;
  border-top-right-radius:
    20px;
border:solid 1px black;
  border-top-right-radius:
    20px 20px;
border:solid 1px black;
  border-top-right-radius:
    20px 40px;
border:solid 1px black;
  border-top-right-radius:
    40px 20px;

Border-bottom-left-radius

The border-bottom-left-radius property sets the rounding of the bottom-left corner of the element.

This property has the following syntax:

border-bottom-left-radius: length|% [ length|% ];

When two values are supplied, they define the horizontal and vertical radii of a quarter ellipse, which determines the curvature of the corner of the outer border edge.

When only one value is supplied, it is used to define both the horizontal and vertical radii equally.

Note: If either value is zero, the corner will be square.

Examples

The following example shows the basic use of this property:

<pre style="border:solid 1px black;
  border-bottom-left-radius:2em;">
border:solid 1px black;
border-bottom-left-radius:2em;
</pre>

This produces the following result:

border:solid 1px black;
    border-bottom-left-radius:
      2em;

The following examples show some various corner radius values:

border:solid 1px black;
  border-bottom-left-radius:
    20px
border:solid 1px black;
  border-bottom-left-radius:
    20px 20px;
border:solid 1px black;
  border-bottom-left-radius:
    20px 40px;
border:solid 1px black;
  border-bottom-left-radius:
    40px 20px;

Border-bottom-right-radius

The border-bottom-right-radius property sets the rounding of the bottom-right corner of the element.

This property has the following syntax:

border-bottom-right-radius: length|% [ length|% ];

When two values are supplied, they define the horizontal and vertical radii of a quarter ellipse, which determines the curvature of the corner of the outer border edge.

When only one value is supplied, it is used to define both the horizontal and vertical radii equally.

Note: If either value is zero, the corner will be square.

Examples

The following example shows the basic use of this property:

<pre style="border:solid 1px black;
  border-bottom-right-radius:2em;">
border:solid 1px black;
border-bottom-right-radius:2em;
</pre>

This produces the following result:

border:solid 1px black;
    border-bottom-right-radius:
      2em;

The following examples show some various corner radius values:

border:solid 1px black;
  border-bottom-right-radius:
    20px;
border:solid 1px black;
  border-bottom-right-radius:
    20px 20px;
border:solid 1px black;
  border-bottom-right-radius:
    20px 40px;
border:solid 1px black;
  border-bottom-right-radius:
    40px 20px;

Leave a Reply

Your email address will not be published. Required fields are marked *