Languages
[Edit]
EN

CSS - how to curve corners in a div

3 points
Created by:
Dirask Community
3930

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

Quick solution:

div {
    border-radius: 20px;
}

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

  1. How to curve all corners using border-radius property,
  2. How to curve selected corners.

Solution 1

Below example shows the use of a border-radius property to make curved <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 curve 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 curve 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 curve      */
        border-top-right-radius: 30px;     /* <----- top-right corner curve     */
        border-bottom-right-radius: 40px;  /* <----- bottom-right corner curve  */
        border-bottom-left-radius: 50px;   /* <----- bottom-left corner curve   */
    }
  </style>
</head>
<body>
  <div></div>
</body>
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