How to Create an \'Inverted\' Border-Radius in CSS: A Comprehensive Guide

'Inverted' Border-Radius: A Comprehensive Guide

In the realm of web development, achieving the desired aesthetic effects can sometimes require unconventional approaches. One such challenge is the creation of an 'inverted' border-radius, where the rounded corners appear to be recessed rather than protruding.

Can Native CSS Handle Inversion?

Unfortunately, native CSS does not provide a direct solution for inverted border-radius. As documented in MDN, negative border-radius values are invalid.

Alternative Solutions

1. External Libraries:

Third-party libraries can simplify the task of creating inverted border-radius effects. While some libraries approach the problem in an outdated manner, such as using images, newer approaches offer more efficient solutions.

2. Pure CSS (Experimental):

Using pure CSS, it is possible to simulate inverted border-radius effects with clever positioning and background tricks. The idea is to create additional elements with a slightly smaller border-radius than the main element and strategically place them outside the main element. By adjusting the background color of these additional elements to match the page background, the effect of recessed rounded corners is created.

Implementation

Here's a code snippet for a pure CSS implementation of inverted border-radius:

<code class="css">#main {
  margin: 40px; /* Adjust margins for spacing */
  height: 100px;
  background-color: #004C80;
  position: relative;
  overflow: hidden; /* Prevent content from leaking out */
}

#main div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%; /* Generous border-radius for the effect */
  background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }</code>

<code class="html"><div id="main">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>
</div></code>

By adjusting the border-radius and positioning of these additional elements, you can fine-tune the effect of the inverted border-radius as desired.

The above is the detailed content of How to Create an 'Inverted' Border-Radius in CSS: A Comprehensive Guide. For more information, please follow other related articles on the PHP Chinese website!