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:

CSS border-radius with Multiple Values

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

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 »


Liked this post? Share it!