Languages
[Edit]
EN

CSS - how to round corners in a div

3 points
Created by:
Isaiah89
361

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:

  1. how to round all corners using border-radius property,
  2. 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>

Related posts

CSS

Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join