How Can I Achieve Inverted Border-Radius in CSS?

Inverted Border-Radius: Exploring CSS and Non-Native Solutions

In the quest for innovative designs, the question of creating an "inverted" border-radius often arises. While border-radius is prevalent in web design, it typically applies rounded corners to the inside of an element. However, achieving the effect of rounded corners on the outside, as depicted by the BLACK arrow in the provided image, requires alternative approaches.

Native CSS Limitations

The native CSS property border-radius does not support negative values, making it impossible to invert the effect directly. Libraries like the one suggested in the user's reply implement this effect by creating additional HTML elements to mimic the desired appearance.

Pure CSS Approach

Using solely CSS, one can create an illusion of inverted border-radius by meticulously positioning additional elements:

1. Define a container (#main) and add four child elements (divs) positioned absolutely.
2. Set the background color of the child elements to match the page background.
3. Position the child elements slightly outside the container using negative margins.
4. Apply a border-radius to the child elements, creating the desired effect.

Example:

<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>

<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>

This approach provides a pure CSS solution for inverted border-radius, while acknowledging the limitations of native border-radius.

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