Languages
[Edit]
EN

CSS - how to round corners in a div

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:

  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

Alternative titles

  1. CSS - border-radius property example
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

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