How to round the corners of any HTML element using CSS?

In this tutorial, you will learn how to make the corners round of any HTML element (image, button, div, table, etc.) using CSS.

There are some border-radius properties in CSS that are used to round the corners of any HTML elements.

• border-top-left-radius: – top left corner.
• border-top-right-radius: – top right corner.
• border-bottom-left-radius: – bottom left corner.
• border-bottom-right-radius: – bottom right corner.

You can assign values to these properties in one of the following – px, rem, em, %.

Example with results

---

Simple way to round corners using CSS

There is one more property in CSS called border-radius: which is a shorthand for all the border radius properties.

You can easily round the corners of an element by using the border-radius: property. This property can take value in 4 different ways –

1. Round all corners equally

If you want all four corners to be equally rounded, just give a single value to the border-radius property. The single value will be for all corners.

border-radius: 10px;

<style>
  .round{
    width: 150px;
    height: 150px;
    border: 2px solid black;
    padding: 10px;
    
    border-radius: 15px;
  }
</style>

<div class="round">Hello</div>

---

2. Round opposite corners equally

Give two values to the border-radius property to round the opposite corners equally. like – border-radius: 5px 20px;

• The first value – is for the top-left and bottom-right corners.
• The second value – is for the top-right and bottom-left corners.

---

3. Assign values to all corners in a single line

The border-radius property is also able to give the values to all corners in a single line. You have to put four values to the border-radius property like – border-radius: 15px 30px 20px 25px;

• First value – is for the top-left corner.
• Second value – is for the top-right corner.
• Third value – is for the bottom-right corner.
• Fourth value – is for the bottom-left corner.

border-radius: top-left top-right bottom-right bottom-left;

---

4. border-radius: property with the three values

The border-radius property can take three values like – border-radius: 10px 5px 18px;

• First value – is for the top-left corner.
• Second value – is for the top-right and bottom-left corners.
• Third value – is for the bottom-right corner.

---

Round the corners of an image element

Use the CSS border-radius: property to round the corners of an image element.

<style>
  img{
    width: 200px;
    height: auto;
    border-radius: 10px 30px;
  }
</style>

<div>
  <img src="./image.jpg" alt="test image">
</div>