Cover

The inverted border radius technique rounds the element's corners inward, not outward like a standard border radius. This technique is mostly used in modern design to add more aesthetic and visual interest. In this tutorial, we will create layout with background images and content that has inverted border radius at the top and the right side.

HTML Structure

This HTML structure is very simple. We have a container that contains image and content elements inside the section with inverted border radius.

<div class="container">
  <img src="[image url]" alt="cover" />

  <div class="content">
    <!-- content -->
  </div>
</div>

<div class="container"> → for the wrapper.
<img> → showing the image.
<div class="content"> → place elemnts inside the section with inverted border radius.

CSS Styling

We will use CSS for making the inverted border radius effet.

a. Styling the Container

The container will have a specific size, background color, and rounded corners using border-radius.

.container {
  position: relative;
  width: 80vw;
  height: 80vh;
  background: #fff;
  border-radius: 24px;
  padding: 8px;
  box-shadow: 0 4px 10px 4px rgba(0, 0, 0, 0.1);
}

border-radius: 24px; → Making rounded corner for the container.
box-shadow → creating a smooth shadow for a more modern look.

b. Styling the Image

The image should fill the entire container while maintaining its aspect ratio and have rounded corners to match the container.

.container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

object-fit: cover; → Prevents the image from being distorted.
border-radius: 16px; → Matches the image's shape to the container.

c. Styling the Content with Inverted Border Radius

In this section, we will create the inverted border radius effect using pseudo-elements (::before and ::after) placed at the top right corner.

.container .content {
  width: 50%;
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 16px;
  background: #fff;
  border-top-right-radius: 16px;
}

position: absolute; → Allows the content element to be positioned within the container.
border-top-right-radius: 16px; → Gives the top right corner a rounded shape.

d. Creating the Inverted Border Radius with Pseudo-elements

Use ::before and ::after to create the inward circular cut effect.

.container .content::before,
.container .content::after {
  display: block;
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  background-image: radial-gradient(
    circle at top right,
    transparent 70%,
    #fff 71%
  );
}

radial-gradient(circle at top right, transparent 70%, #fff 71%) → Creates a circular gradient at the top right corner with an inward cut.
Then, set the positions of the pseudo-elements:

.container .content::before {
  left: 0;
  bottom: 100%;
}
.container .content::after {
  left: 100%;
  bottom: 0;
}

::before → Positioned above the content element.
::after → Positioned on the right side of the content element.

Final Result

With this code, we achieve the inverted border radius effect on the top right corner of the content element.

If applied correctly, the result will look like this:

Container with a background image Content with an inward-cut border radius effect

iqbl

How to Make an Inverted Border Radius in CSS