Negative Border Radius in CSS

CSS: borders with negative radius

You can check out this jQuery plugin: http://jquery.malsup.com/corner/ Which has lots of other possibilities for border styling as well.

You can also check out a solution provided by Lea Verou. She uses negative border radius with css3 gradients: http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

CSS Gradients - negative border radius

Yes. Instead of trying to put the orange element on top, put it on the bottom, where the teal element can have the border radius instead (and the orange one shows through). Simple example:

#thing {  width: 400px;  height: 200px;  background-color: teal;  border-bottom-right-radius: 50%;  position: relative;}
#thing:after {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: orange;  z-index: -1;}

<div id="thing"></div>

Inverted' border-radius possible?

Not using the native border-radius. As mentioned on MDN "Negative values are invalid". You could definitely look for a library out there which does this for you automatically (though I find the approach taken in Philip's suggested library to be particularly outdated).

Using pure CSS I have come up with an approach. The idea is to add 4 extra elements inside your container, set their background to the same color as your page background (so this will not let page content underneath filter through – for that, you’d need SVG masking or similar), and to position them in such a way that they lie just outside of the element itself. We then apply a border-radius which gives the affect:

#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; }

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

Negative borders (css)

A solution using a pseudo element with a box-shadow:

div {
    background: orange;
    width: 400px;
    height: 40px;
    margin-top: 100px;
    z-index: 1;
    position: relative;
}

div:after {
    content: "";
    position: absolute;
    height: 100px;
    left: 0px;
    right: 0px;
    bottom: 100%;
    background-color: transparent;
    border-bottom-left-radius: 50% 70px;
    border-bottom-right-radius: 50% 70px;
    box-shadow: 0px 0px 0px 100px orange;
    clip: rect(0px, 400px, 100px, 0px);
}

fiddle

---

Related Topics