When designing something for the web, sometimes you want to round the inside of a corner. Historically, we've had to use images to make this happen. The problem is, well, images suck. They don't scale well, so you can't change the radius, they waste bandwidth, and any time you want to change their color or style, you're SOL! While CSS has provided the native ability to round outer corners for some time with the `border-radius` property, this whole inner corner business has been tricky... until now. This strategy will let you:
  • Use any color you want including transparent colors!
  • Change the radius on the flu
  • Look good in Retina (highDPI) displays
  • Save a request, bandwidth, and a bunch of hassle!
Check out the jsFiddle: Here's a simple HTML page we're going to make pretty:
Select Code
1
2
3
4
5
6
7
<div class="first">
    <p>This is made with 100% CSS</p>
</div>
<div class="second">
    <p>Go ahead, zoom in, use that Retina display!</p>
</div>
Here's the special CSS-sauce:
Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
html {
    background: url(http://farm8.staticflickr.com/7215/7268755328_ede47bc659.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    font-family: Helvetica, Arial, sans-serif;
}

div {
    background-color: rgba(255,255,255,.7);
    color: black;
    position: absolute;
    text-align: center;
}

.first {
    border-radius: 12px 12px 0 0;
    height: 100px;
    left: 100px;
    top: 100px;
    width: 100px;
}

.first::after {
    background: transparent;
    border-radius: 0 0 0 12px;
    bottom: 0;
    box-shadow: -2px 2px 0 2px rgba(255,255,255,.7);
    clip: rect(0px, 12px, 12px, 0px);
    content: "";
    display: block;
    height: 12px;
    left: 100%;
    position: absolute;
    width: 12px;
}

.second {
    border-radius: 0 12px 12px 12px;
    height: 100px;
    left: 100px;
    top: 200px;
    width: 200px;
}

p {
    padding: 12px;
}
​