CSS Rounded Corners

When you are designing a webpage, your main focus is always to improve the visitor’s overall experience. To achieve this you can’t ignore even the small things like the corners of the elements.

Rounded corners of elements like images, tables, boxes, buttons, etc. can make their appearance much better. In this tutorial, we will discuss how to make rounded corners in CSS.

How to Make Rounded Corners in CSS?

To make the corners of an element rounded we use the border-radius property. The border-radius property defines the radius of an element’s corners. It can be specified in px, em, rem, etc.

Each of the three boxes given below has a border-radius of 20px. Therefore their corners look rounded.

Example:

#div1{
    width: 150px;
    height: 150px;
    background: #05ffb0;
    border-radius: 20px;
}
#div2{
    width: 150px;
    height: 150px;
    border: 3px solid #05ffb0;
    border-radius: 20px;
}
#div3{
    width: 150px;
    height: 150px;
    background-image: url(images/sand.jpg);
    border-radius: 20px;  
}

Make Individual Corner Rounded

In the last example, we discussed how we can make all of the corners of an element rounded. But, you might sometimes need to make each corner rounded individually.

To set the border radius of each corner individually, we can take help of the below four properties:

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

These four properties specify the border radius of the top-left, top-right, bottom-left, and bottom-right corners respectively.

Example:

#div1{
   width: 120px;
   height: 120px;
   border: 3px solid #ff0584;
   border-top-left-radius: 50px;
   padding: 20px;
}
#div2{
   width: 120px;
   height: 120px;
   border: 3px solid #ff0584;
   border-top-right-radius: 50px;
   padding: 20px;
}
#div3{
   width: 120px;
   height: 120px;
   border: 3px solid #ff0584;
   border-bottom-left-radius: 50px;
   padding: 20px;
}
#div4{
   width: 120px;
   height: 120px;
   border: 3px solid #ff0584;
   border-bottom-right-radius: 50px;
   padding: 20px;
}

CSS Rounded Corners – The Shorthand Property

There might sometimes be situations where you have to make each corner rounded but with a different border-radius. The one way to do this is specifying each corner radius individually as we saw in the last example.

But, there is a much simpler solution to this, the border-radius shorthand property. The border-radius property is actually a shorthand of the following properties:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

So instead of specifying each corner radius individually, we can specify them at once using the border-radius property. It can accept one to four values at a time. Let’s discuss each:

If the border-radius property has four values:

• border-radius: 20px 40px 60px 80px
  • top-left corner radius will be 20px
  • top-right corner radius will be 40px
  • bottom-right-corner-radius will be 60px
  • bottom-left-corner-radius will be 80px

With four values

If the border-radius property has three values:

• border-radius: 20px 40px 60px
  • top-left corner radius will be 20px
  • top-right and bottom-left corners radius will be 40px
  • bottom-right corner radius will be 60px

With three values

If the border-radius property has two values:

• border-radius: 20px 40px
  • top-left and bottom-right corners radius will be 20px
  • top-right and bottom-left corners radius will be 40px

With two values

If the border-radius property has only one value:

• border-radius: 20px
  • All four coners will have the same 20px border radius

With one value

Example:

#div1{
   width: 140px;
   height: 140px;
   border-radius: 20px 40px 60px 80px;
   background: #05ffb0;
   padding: 20px;
}
#div2{
   width: 140px;
   height: 140px;
   border-radius: 20px 40px 60px;
   background: #05ffb0;
   padding: 20px;
}
#div3{
   width: 140px;
   height: 140px;
   border-radius: 20px 40px;
   background: #05ffb0;
   padding: 20px;
}
#div4{
   width: 140px;
   height: 140px;
   border-radius: 20px;
   background: #05ffb0;
   padding: 20px;
}

Create a Circle in CSS

The border-radius can also be specified using % value. It can help us to create perfect circles.

To make an element a perfect circle, we have to set its border-radius to 50%. But, remember that the height and width of the element must be exactly the same. Otherwise, it may result in some other shape of the element.

Example:

#div1{
    width: 150px;
    height: 150px;
    background: #05ffb0;
    border-radius: 50%;
    padding: 20px;
    text-align: center;
}
#div2{
    width: 150px;
    height: 150px;
    border: 3px solid #05ffb0;
    border-radius: 50%;
    padding: 20px;
    text-align: center;

}
#div3{
    width: 150px;
    height: 150px;
    background-image: url(images/sand.jpg);
    border-radius: 50%;
    padding: 20px;
    text-align: center;
}

Make Rounded Corner Images in CSS

Just like the <div> element, we can also apply the border-radius property to an image to make its corners rounded. The border-radius property can be applied to any individual corner or all corners of the image just like the div element.

border-radius: 20px;

border-radius: 20%;

border-radius: 50%;

Example:

#img1{
  width: 200px;
  height:200px;
  border-radius: 20px;
}
#img2{
  width: 200px;
  height:200px;
  border-radius: 20%;
}
#img3{
  width: 200px;
  height:200px;
  border-radius: 50%;
}

Make Rounded Corner Buttons in CSS

Just like other elements, we can also make a button’s corners rounded using the border-radius property.

Example:

.btn{
    border: none;
    padding: 7px 26px;
    text-align: center;
    color: white;
    background: #dc3545;
}
.btn1{
    border-radius: 2px;
}
.btn2{
    border-radius: 4px;
}
.btn3{
    border-radius: 10px;
}
.btn4{
    border-radius: 15px;
}
.btn5{
    border-radius: 40px;
}

Make Circle Buttons in CSS

To create a circle button in CSS, make the height and width of the button the same and set its border-radius to 50%. If the width and height of the button are not the same, it will never result in a circle.

50% 50% 50%

Here is the code:

Example:

.btn{
    width: 50px;
    height:50px;
    border-radius: 50%;
    border: none;
    color: white;
    padding: 0px;
    text-align:center;
}
.btn1{
    background: #dc3545;
}
.btn2{
    background: #28a745;
}
.btn3{
    background: #ffc107;
}
.btn:hover{
    background: #666;
    cursor: pointer;
}

Make Rounded Corner Table in CSS

The border-radius property can also be used to make a table’s corners rounded.

Look at the following table, it has all four corners rounded.

Here is the code:

Example:

table{
    border-spacing: 0;
    border: 1px solid black;
    border-radius: 10px;
}

td, th{
    border-left: 1px solid black;
    border-top: 1px solid black;
    padding: 10px;
}

th{
    border-top: none;
}

td:first-child, th:first-child {
    border-left: none;
}

If you want to make only the header’s corners rounded, you have to use the border-top-left-radius and border-top-right-radius properties to set them individually.

Here is the code with a slight modification:

Example:

table{
    border-spacing: 0;
    border: 1px solid black;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

td, th{
    border-left: 1px solid black;
    border-top: 1px solid black;
    padding: 10px;
}

th{
    border-top: none;
}

td:first-child, th:first-child {
    border-left: none;
}

Related Articles

• CSS Borders
• CSS border-radius Property