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>
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
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>
Inset border-radius for an image
One way:
<div class="container">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="dot4"></div>
<img src='http://placehold.it/400x300'>
</div>
CSS:
.container {
position:relative;
margin:50px auto;
width:400px;
}
.dot1 {
background-color:white;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
left:-25px;
top:-25px;
}
.dot2 {
background-color:white;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
right:-25px;
top:-25px;
}
.dot3 {
background-color:white;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
right:-25px;
bottom:-25px;
}
.dot4 {
background-color:white;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
left:-25px;
bottom:-25px;
}
Demo: http://jsfiddle.net/ofejxfj6/
You can tweak it a little (size of circles/dots and dimensions), but it is pretty close, IMHO.
Related Topics
Play Infinitely Looping Video On-Load in HTML5
Flexbox on Ie11: Image Stretched for No Reason
Aligning Elements Left and Center with Flexbox
Placing a <Div> Within a <Canvas>
How to Preload a Page Using HTML5
Html5 Placeholder Disappears on Focus
Absolute Position and Overflow:Hidden
It Is Possible to Expand a Textarea Only with CSS
Do HTML5 Script Tag Need Type="Javascript"
How to Disable the Spell Checker on Text Inputs on the Iphone
Changing the Text Selection Color Using CSS
HTML Generated Microsoft Word Document with Header, Footer and Watermark
How to Remove the Top Margin in a Web Page
Delay HTML5 :Invalid Pseudo-Class Until the First Event
How to Prevent Chrome from Changing Font When Autofilling Username/Password