DEV Community

Refine profile image Necati Özmen
Necati Özmen for Refine

Posted on • Originally published at refine.dev

8 1 1 1 1

CSS Rounded Corners Examples

#css #webdev #beginners #programming


refine repo

Introduction

Rounded corners on HTML help soften the overall design of a website, giving it a more inviting and user-friendly appearance. We'll examine CSS-created rounded corners in this article.

Steps we'll cover:

What is CSS border-radius?

The border-radius attribute in CSS specifies the radius of a HTML element's corners. The border-radius attribute can have between one and four values.

border-radius: 15px 50px 30px 5px;
Enter fullscreen mode Exit fullscreen mode
  • The first value applies to the top-left corner.
  • The second to the top-right corner.
  • The third to the bottom-right corner.
  • The fourth to the bottom-left corner.

The border-radius can be set for all four sides using the shorthand property shown below:

border-radius: 10px;
Enter fullscreen mode Exit fullscreen mode

The border-radius can be set for the top-left-and-bottom-right and top-right-and-bottom-left corners using the shorthand property shown below:

border-radius: 10px 20px;
Enter fullscreen mode Exit fullscreen mode

The border-radius can be set for the top-left, top-right-and-bottom-left, and bottom-right corners using the shorthand property shown below:

border-radius: 10px 20px 30px;
Enter fullscreen mode Exit fullscreen mode

The above examples display that the border-radius attribute can accept a single radius (defined at all the corners). Defining a single radius for the border-radius attribute will form round corners.

Alternatively, the border-radius attribute can also accept two radii to form elliptical corners. An example is shown below:

border-radius: 40px / 10px;
Enter fullscreen mode Exit fullscreen mode

In the sample above, the '/' separates the two radii from each other.

You can also use the shorthand property on the two radii as shown below:

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 20px / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 15px / 20px 25px 30px;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5px / 20px 15px 30px 35px;
Enter fullscreen mode Exit fullscreen mode

Rounded corners using CSS border-radius

Example:

We will display examples of how to create rounded corners using the border-radius attribute.

HTML:

<html>
  <body>
    <div class="container">
      <div class="four-rounded-corners">
        <p>Four rounded Corners</p>
      </div>

      <div class="rounded-right-corners">
        <p>Right rounded Corners</p>
      </div>

      <div class="rounded-left-corner">
        <p>Left rounded Corners</p>
      </div>

      <div class="rounded-corners-top-left-bottom-right-corners">
        <p>Rounded top left bottom right Corners</p>
      </div>

      <div class="rounded-corners-top-right-bottom-left-corners">
        <p>Rounded top right bottom left Corners</p>
      </div>

      <div class="rounded-circular-corners">
        <p>Rounded Circle Corners</p>
      </div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

div.four-rounded-corners {
  /* using the shorthand property to set the border radius on all corners */
  border-radius: 30px;
  background: orange;
  padding: 100px;
  text-align: center;
  font-size: 32px;
}

div.rounded-right-corners {
  /* using the shorthand property to set the border radius on the top-right and bottom-right corners */
  border-radius: 0px 30px 30px 0px;
  ...;
}

div.rounded-left-corner {
  /* using the shorthand property to set the border radius on the top-left and bottom-left corners */
  border-radius: 30px 0px 0px 30px;
  ...;
}

div.rounded-corners-top-left-bottom-right-corners {
  /* using the shorthand property to set the border radius on the top-left and bottom-left corners */
  border-radius: 30px 0px 30px 0px;
  ...;
}

div.rounded-corners-top-right-bottom-left-corners {
  /* using the shorthand property to set the border radius on the top-right and bottom-left corners */
  border-radius: 0px 30px;
  ...;
}

div.rounded-circular-corners {
  width: 400px;
  height: 400px;
  /* dynamically setting the radius of the corners to be 50% -- half the width and height of the element */
  border-radius: 50%;
  background: orange;
  font-size: 32px;
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

VIEW:


css rounded corners

Elliptical corners using CSS border-radius

We will display examples of elliptical borders using CSS border-radius. To create elliptical corners, the border-radius attribute will contain two radii.
Elliptical corners are recognized by the majority of modern browsers. Nonetheless, -webkit versions might be useful for browsers that don't support CSS3 (elliptical corners aren't supported by older versions of -mos-border-radius).

Example

We will create a cylinder-like shape using two radii on the border-radius property.

HTML:

<html>
  <body>
    <div>Elliptical Corners</div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS:

div {
  width: 400px;
  height: 400px;
  border-radius: 100px / 25px; /* setting the 2 radii in the property */
  background: orange;
  font-size: 32px;
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

VIEW:


css rounded corners

Random corners using CSS border-radius.

We will display examples of random borders using CSS border-radius.

Example 1

We will create a blob-like shape using the radius defined on the border-radius property.

HTML:

<html>
  <body>
    <div>Elliptical Corners</div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS:

div {
  width: 400px;
  height: 400px;
  border-radius: 60% 30% 30% 20%
    /* setting the radius in percentages for random corners */;
  background: orange;
  font-size: 32px;
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

VIEW:


css rounded corners

Example 2:

We will create a blob like shape using the 2 radii defined on the border-radius property.

CSS

div {
  width: 400px;
  height: 400px;
  border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
  background: orange;
  font-size: 32px;
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

VIEW:


css rounded corners

Inverted corners

The basic idea for making an inverted corner is to make a pseudo element, remove the border-radius from the corner on the div (bearing the pseudo element) where we want to add the inverted corner, and then cut a border-radius out of that pseudo element.
Next, we use a box-shadow to give the pseudo element's shadow the same color as the parent div element.

Example:

We will create a chat bubble using the idea of inverted corners.

HTML:

<html>
  <body>
    <div>Chat Bubble</div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS:

div {
  margin-top: 50px;
  position: relative;
  width: 200px;
  height: 80px;
  /* background of main div*/
  background: orange;
  padding: 20px;
  border-radius: 0px 8px 8px 8px;
  display: grid;
  place-items: center;
}

div:before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  height: 40px;
  width: 40px;
  background: transparent;

  /* border-radius of pseudo element */
  border-bottom-left-radius: 50%;

  /* box shadow to give the shadow of the pseudo-element the same color as the background */
  box-shadow: 0 20px 0 0 orange;
}
Enter fullscreen mode Exit fullscreen mode

VIEW:


css rounded corners

Notched corners

We will display examples of notched borders using CSS.

Example 1:

The basic idea for making an notched corner in this example is as follows:

  • Create a pseudo element from a div element,
  • Collapse the pseudo element on the section of the div where you want to make the notched corner.
  • Create a box shadow on the pseudo element.
  • Set overflow: hidden on the div element to conceal the overflowing bits of its child elements.
  • Use the box-shadow of the pseudo-element to fill the background of the parent div element.

We will create a partly truncated div element using the idea of notched corners.

HTML:

<html>
  <body>
    <div class="notched-corner">
      <p>Notched Corners</p>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS:

div.notched-corner {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: transparent;
  overflow: hidden;
}

div.notched-corner:before {
  content: "";
  position: absolute;
  left: 90%;
  top: -20%;
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  background-color: transparent;
  box-shadow: 0 0 0 250px orange;
}

p {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -35%);
}
Enter fullscreen mode Exit fullscreen mode

VIEW:


css rounded corners

Example 2:

The clip-path parameter specifies which section of an element should be shown. It can be combined with the polygon() method to form a notched corner (or complex shapes).

HTML:

<html>
  <body>
    <div class="notched-corner">
      <p>Notched Corners</p>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS:

div.notched-corner {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
  background: orange;
  clip-path: polygon(
    0 10%,
    10% 0,
    90% 0,
    100% 0%,
    100% 90%,
    90% 100%,
    0% 100%,
    0% 90%,
    0% 10%
  );
}

p {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -35%);
  font-size: 32px;
}
Enter fullscreen mode Exit fullscreen mode

VIEW:


css rounded corners

Conclusion

In this article, we discussed numerous approaches for building different sorts of corners utilizing CSS features like border-radius, pseudo-elements, box-shadow, clip-path, and many others. With this information, you can construct a variety of visually appealing and inviting designs for your websites or web applications.

Top comments (1)

Collapse
 
michaeltharrington profile image
Michael Tharrington •

Nice tutorial, Necati! This is handy. 🙌

DEV Community

Timeless DEV post...

CSS can do that? 🤯

css can do that?

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay