Home  >  Article  >  Web Front-end  >  How to Create an Inverted Border-Radius Effect in CSS?

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

DDD
DDDOriginal
2024-10-31 11:09:29952browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn