Web4College

border radius

The border radius property converts the rectangular sharp corners of a box into rounded shape corners. The value of border radius may in some unit (px, em) or in percentage (%).

Preview Example
Try it

There are different perspectives of the border-radius property.


value in some unit (px)

We'll take the value in pixels.

One value for border-radius property

When we specify a value for the radius property, it is applied to all the four corners of box.

Example
Try it
<style>
div{
 width:100px;
 height:100px; 
 border-radius:50px;	
}
</style>

If the value of border-radius property is half (50px) of the dimension of the box, then a circular shape is formed.

circle

It means that the value of border-top-left, border-top-right, border-bottom-right-radius, border-bottom-left-radius is 50px.

Values for individual properties

It'll be more clear when we define different properties for the four corners.

Example
Try it
<style>
div{
 width:100px;
 height:100px;
 border-top-left-radius:10px 50px; 
 border-top-right-radius:20px 50px; 
 border-bottom-right-radius:25px 40px; 
 border-bottom-left-radius:5px 30px; 
}
</style>
border-radius properties for different corners

The above individual properties can be combined into one property. The following example forms the same shape as the example given above.

Example
Try it
<style>
div{
 width:100px;
 height:100px;
 border-radius:10px 20px 25px 5px / 50px 50px 40px 30px; 
}
</style>

value in percentage (%)

In this case, we'll take the value in percentage (%).

One value for border-radius property (%)

Example
Try it
<style>
div{
 width:100px;
 height:100px;
 border-radius:50%; 
}
</style>

values for individual properties (%)

We can also define border-radius properties for the individual corners.


Example
Try it
<style>
div{
 width:100px;
 height:100px;
 border-top-left-radius:100%; 
 border-top-right-radius:100%; 
 border-bottom-right-radius:100%; 
}
</style>

Practice border-radius property

See how border-radius property transforms the corners into rounded shape.

Preview Example
Try it

The width and height of the box is 100px.

You may use border radius generator to round the corners of a rectangular shape.

Learn how to make an isosceles triangle or right triangle using border radius property.