CSS border-radius (Set/Change Radius of Border)

The CSS border-radius property is used when we need to round the corner of the border. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 4px solid chocolate; padding: 10px; border-radius: 10px;}
   </style>
</head>
<body>

   <p>This is a para.</p>
   
</body>
</html>

Output

This is a para.

CSS border-radius Syntax

The syntax of border-radius in CSS, is:

border-radius: x;

The value of x should be any of the following:

length - used to define how much the corner of the border has to be rounded. The default value is 0
% - used to define the same as done using length, but with the help of percentage. Therefore, 100% value is used to round the corner of the border for maximum
initial - used to set the default value
inherit - used to inherit the value from its parent

CSS border-radius with Multiple Values

We can also define the border-radius using multiple values.

If four values given, then first value applies to top left corner, second value applies to top right corner, third value applies to bottom right corner, and fourth value applies to bottom left corner
If three values given, then first value applies to top left, second value applies to top right and bottom left, whereas the third value applies to bottom right corner
If two values given, then first value applies to top left and bottom right, whereas the second value applies to top right and bottom left corner

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 3px solid chocolate; padding: 20px;}
      p#one {border-radius: 10px 20px 30px 40px;}
      p#two {border-radius: 10px 20px 40px;}
      p#three {border-radius: 10px 40px;}
      p#four {border-radius: 10px;}
   </style>
</head>
<body>

   <p id="one">This is a para.</p>
   <p id="two">This is para two.</p>
   <p id="three">This is para four.</p>
   <p id="four">This is last para.</p>
   
</body>
</html>

Output

This is a para.

This is para two.

This is para four.

This is last para.

CSS Online Test

« Previous Tutorial Next Tutorial »