CSS Rounded Corners

❮ Previous Next ❯

CSS Rounded Corners

With the CSS border-radius property, you can give any element "rounded corners".

CSS border-radius Property

The CSS border-radius property defines the radius of an element's corners. Tip: This property allows you to add rounded corners to elements! Here are three examples:

Rounded corners for an element with a specified background color:
Rounded corners for an element with a border:
Rounded corners for an element with a background image:

      
                    <!DOCTYPE html>
<html>
<head>
<style> 
.boxcorners1 {
  border-radius: 25px;
  background: darkblue;
  color:white;
  padding: 20px; 
  width: 150px;
  height: 120px;  
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p class="boxcorners1">Rounded corners!</p>

</body>
</html>

Tip: The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

CSS border-radius - Specify Each Corner

The border-radius property can have from one to four values. Here are the rules:

Four values - border-radius: 15px 50px 30px 5px; (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):
Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):
Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):
One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally:

      
                    <!DOCTYPE html>
<html>
<head>
<style> 
p{
 background: darkblue;
 padding: 20px; 
 width: 150px;
 height: 100px; 
 color:white;
}

.boxrcorners1 {
  border-radius: 15px 50px 30px 5px;
}


.boxrcorners3 {
  border-radius: 15px 50px;
} 

.boxrcorners4 {
  border-radius: 15px;
} 


.boxrcorners2 {
  border-radius: 15px / 50px;
}

.boxrcorners3 {
  border-radius: 50%;
} 
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p class="boxrcorners1">Four values - border-radius: 15px 50px 30px 5px:</p>

<p class="boxrcorners3">Two values - border-radius: 15px 50px:</p>

<p class="boxrcorners4">One value - border-radius: 15px:</p>

<h1>Elliptical border</h1>

<p class="boxrcorners2">Elliptical border - border-radius: 15px / 50px:</p>

<p class="boxrcorners3">Ellipse border - border-radius: 50%:</p>

</body>
</html>