No exemplo tem borda arredonda invertida e também cantos em corte diagonal (chanfro):.
/**
* Beveled corners & negative border-radius with CSS gradients
*/
.bevel {
background: #fff; /* fallback */
background:
linear-gradient(135deg, transparent 10px, #fff 0) top left,
linear-gradient(225deg, transparent 10px, #fff 0) top right,
linear-gradient(315deg, transparent 10px, #fff 0) bottom right,
linear-gradient(45deg, transparent 10px, #fff 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.bevel.round {
background-image:
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #fff 15px),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #fff 15px),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #fff 15px),
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #fff 15px);
}
/* esta parte a seguir é somente para testes */
html, body {
height: 100%;
}
body {
background: red;
background-image: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 100%);
background-repeat: no-repeat;
animation: coresanimadascores-animadas 5s infinite;
}
.exemplo {
width: 200px;
margin: 15px auto;
padding:13px 15px;
color: #0c0c0c;
line-height:1.5;
}
@keyframes coresanimadascores-animadas
{
0% { background-color: red; }
20% { background-color: green; }
40% { background-color: blue; }
60% { background-color: violet; }
80% { background-color: orange; }
100% { background-color: red; }
}
<div class="exemplo bevel">
foo bar baz<br>foo bar baz<br>foo bar baz
</div>
<div class="exemplo bevel round">
foo bar baz<br>foo bar baz<br>foo bar baz
</div>