How to Create an Inverted Border-Radius Effect in CSS?

Creating Inverted Border-Radius Effects

Question:

Can an inverted border-radius effect be achieved where the corners appear to curve inward?

Answer:

Native CSS's border-radius property does not permit negative values that would result in an inverted effect. However, here's an alternative approach using CSS:

Add four additional elements within the container, ensuring they extend slightly beyond its boundaries. These elements should match the background color of the page, creating an illusion of the page content underneath. Position these elements strategically around the corners and apply a border-radius to achieve the inverted effect.

Code Snippet:

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

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