❮❮ PREV NEXT ❯❯

CSS - Border Radius

So far we have seen the borders with sharp corners. Now, with the border-radius property in CSS, we can give rounded corners to the borders.

Border-radius property in CSS

The border-radius property in CSS is used to set the radius of an element's corners.

Let us see it with the below example.

Example :

<html>
<head>
	<style>
		p {
  			border-radius: 20px;
  			border: 2px solid red;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you see the above output, we can see a red border around the <p> element.

And most importantly, the border has all the four corners rounded. That is because of the border-radius property.

We have set the value of border-radius property as 20px. And thus got rounded corners.

More the value of border-radius property will be, more the corners will be rounded.

Four properties for border radius in CSS

The border-radius property is a shorthand for the four properties :

border-top-left-radius

Gives rounded effect for top left corner of the border.

border-top-right-radius

Gives rounded effect for top right corner of the border.

border-bottom-right-radius

Gives rounded effect for bottom right corner of the border.

border-bottom-left-radius

Gives rounded effect for bottom left corner of the border.

Now, let us provide different values for all the four properties and see how the corners of the border looks like.

Example :

<html>
<head>
	<style>
		p {
  			border-top-left-radius: 20px;
  			border-top-right-radius: 30px;
  			border-bottom-right-radius: 50px;
  			border-bottom-left-radius: 40px;
  			border: 2px solid red;
            padding: 20px;
  			width: 200px;
  			height: 150px;  			
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example, we have provided the values for all the four properties,

border-top-left-radius: 20px;
border-top-right-radius: 30px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 40px;

And see that all the four corners of the border have different rounded corners.

Clubbing four properties into border-radius property

Now, let us club all the four properties(i.e. border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius) into border-radius property.

Example :

<html>
<head>
	<style>
		p {
  			border-radius: 20px 30px 50px 40px;
  			border: 2px solid red;
            padding: 20px;
  			width: 200px;
  			height: 150px;  			
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example, we have clubbed all the four properties(i.e. border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius) into border-radius property.

border-radius: 20px 30px 50px 40px;

The first value 20px represents the value of border-top-left-radius.

The second value 30px represents the value of border-top-right-radius.

The third value 50px represents the value of border-bottom-right-radius.

The fourth value 40px represents the value of border-bottom-left-radius.

❮❮ PREV NEXT ❯❯