How to Create \'Inverted Border-Radius\' Effect in CSS?

How to Achieve Inverted "Border-Radius" Effect

When designing a modern website, adding stylistic elements like tabs or navigation bars can enhance the user experience. One desired effect is to create tabs with an "inverted border-radius," where the corners are rounded in a direction that points outward instead of inward.

Since CSS's native border-radius property does not support negative values, achieving this effect requires a different approach. One solution is to use additional elements within the tab container, strategically positioned outside the actual tab. These elements should have a background color that matches the page background, essentially hiding them from view. Then, applying a border-radius to these elements creates the illusion of an inverted rounded corner.

Here's an example using pure CSS:

<code class="css">#main {
  margin: 40px;
  height: 100px;
  background-color: #004C80;
  position: relative;
  overflow: hidden;
}

#main div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  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>

This approach creates an inverted "border-radius" effect by effectively extending the rounded corners outside the tab boundary. It is a simple and effective way to achieve the desired visual style.

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