CSS - border-radius Property

The border-radius property of CSS is used to make the corners of the outer border of an element, rounded.

  • To make the corners circular, add a single radius value and to make it elliptical, add two radii values.

  • The border-radius property is applied to the complete background, even when there is no border specified

  • The border-radius property is not applied to the table elements, when the border-collapse property is set to collapse.

  • The border-radius property is a shorthand for the following CSS properties:

    • border-top-left-radius: Rounds the top left corner of an element.

    • border-top-right-radius: Rounds the top right corner of an element.

    • border-bottom-right-radius: Rounds the bottom right corner of an element.

    • border-bottom-left-radius: Rounds the bottom left corner of an element.

Possible Values

  • <length>: Size of circle radius is denoted, using length values. Negative values are not valid.

  • <percentage>: Size of circle radius is denoted, using percentage values.

    • Horizontal axis percentage is referred to the width of the box.

    • Vertical axis percentage is referred to the height of the box.

    • Negative values are not valid.

The border-radius property can have the above mentioned values as:

  • one, two, three or four values as <length> or <percentage> - for setting a single radius for the corner(s).

  • followed by "/" and one, two, three or four values as <length> or <percentage> - for setting the elliptical corner(s).

Table given below shows the values that are passed and what does that signify:

Sr.No. Property & Description
1

radius

Denotes a radius for the border. One-value syntax.
2

top-left-and-bottom-right

Denotes a radius for the top-left and bottom-right corners of the border. Two-value syntax.
3

top-right-and-bottom-left

Denotes a radius for the top-right and bottom-left corners of the border. Two- and three-value syntaxes.
4

top-left

Denotes a radius for the top-left corner of the border. Three- and four-value syntaxes.
5

top-right

Denotes a radius for the top-right corner of the border. Four-value syntax.
5

bottom-right

Denotes a radius for the bottom-right corner of the border. Three- and four-value syntaxes.
4

bottom-left

Denotes a radius for the bottom-left corner of the border. Four-value syntax.

Applies to

All the HTML elements except non-replaced inline elements, table rows, and row groups.

DOM Syntax

object.style.borderRadius = "20px | 20px 20px | 5% 15px";

Example

Here is an example:

<html>
<style>
   div.box {
      height: 50px;
      width: 50px;
      display: inline-block;
      padding: 5px;
      border: 1px solid black;
   }
   #m {
      border-radius: 20px;
      background-color: aqua;
   }
   #n {
      border-radius: 5% 30px;
      background-color: salmon;
   }
   #o {
      border-radius: 15px 20px 30px;
      background-color: yellow;
   }
   #p {
      border-radius: 20px 3% 20px 5%;
      background-color: blue;
   }
</style>
<head>
</head>
<body>
   <div id="m" class="box"></div>
   <div id="n" class="box"></div>
   <div id="o" class="box"></div>
   <div id="p" class="box"></div>
</body>
</html>
Advertisements