CSS Rounded Corners Examples

Necati Özmen - Apr 3 - - Dev Community


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.

Image
Ten Startups That Will Revolutionize The Personal Injury Claims Industry For The Better
Image
web-site judi slots online bisa dipercaya enteng menang
Image
Judi Online Dengan Bonus Harian dan Mingguan
Image
web slots online deposit pulsa rate paling murah
Image
Dev POST
Image
25 Surprising Facts About ADHD Medication Adults UK
Image
This Is The Ultimate Guide To ADHD Medications For Adults
Image
15 Of The Best Twitter Accounts To Learn More About Personal Injury Claims
Image
10 Methods To Build Your Lost Key To Car Empire
Image
11 Methods To Completely Defeat Your Mental Health
Image
Basics of Application Data Backup in HarmonyOS Next

harmonyos
Image
Unexpected Business Strategies Helped Accident Lawyer Near Me Succeed
Image
Image Slider using html css and javascript coding https://www.instagram.com/webstreet_code/

beginners, javascript, webdev, programming
Image
M.A.C.S [book]: Mentors, Advisors, Coaches & Sponsors | Chapter 2 - A Tale of Two ‘Mentors’ :: Brush It Off

mentorship
Image
HarmonyOS Next 应用数据备份基础知识

harmonyos
Image
What's The Job Market For Bi Fold Door Repairs Professionals Like?
Image
The Reasons Wall Fitted Electric Fires Could Be Your Next Big Obsession
Image
tehnik menang slots online dengan cepat
Image
10 Inspirational Images Of Clearwater Accident Lawyer
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .