CSS - how to round corners in a div

2 contributors

7 contributions

0 discussions

3 points

Created by:

Isaiah89

721

In this article, we would like to show you how to round corners in a div in CSS.

Quick solution:

div {
    border-radius: 20px;
}

There are several ways to round element but in this article, we present two of them depending on which corners we want to round:

how to round all corners using border-radius property,
how to round selected corners.

Solution 1

Below example shows the use of a border-radius property to make rounded <div> element.

Runnable example:

// ONLINE-RUNNER:browser;

<!DOCTYPE>
<html>
<head>
  <style>
    div {
        height: 100px;
        width: 100px;
        background-color: goldenrod;
        border-radius: 20px; /* <---------- use this to round all corners in div */
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Note:
border-radius property can have from one to four values. Read more about the property here.

Solution 2

Below example shows how to round selected corners of the <div> using border-top-left-radius property for the top-left corner and the same for the other corners positions.

Runnable example:

// ONLINE-RUNNER:browser;

<!DOCTYPE>
<html>
<head>
  <style>
    div {
        height: 100px;
        width: 100px;
        background-color: goldenrod;
        border-top-left-radius: 25px;      /* <----- top-left corner round      */
        border-top-right-radius: 30px;     /* <----- top-right corner round     */
        border-bottom-right-radius: 40px;  /* <----- bottom-right corner round  */
        border-bottom-left-radius: 50px;   /* <----- bottom-left corner round   */
    }
  </style>
</head>
<body>
  <div></div>
</body>