We would like to know how to create Rounded Corner Cut-Out with Border.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!-- ww w. java 2 s . co m-->
background: #EEE;
}
.box {
background: #b2b2b2;
height: 160px;
width: 210px;
margin: 25px;
padding: 0;
position: relative;
overflow: hidden;
}
.box:before {
content: "";
display: block;
background: #EEE;
position: absolute;
top: -9px;
left: -9px;
width: 20px;
height: 20px;
border-radius: 20px;
border: 2px solid white;
}
.box:after {
content: "";
display: block;
background: #EEE;
position: absolute;
top: -9px;
right: -9px;
width: 20px;
height: 20px;
border-radius: 20px;
border: 2px solid white;
}
.box p {
color: #fafafa;
width: 100%;
height: 100%;
margin: 0;
padding: 25px;
border: 2px solid white;
box-sizing: border-box;
}
.box .boxBtm:before {
content: "";
display: block;
background: #EEE;
position: absolute;
bottom: -9px;
left: -9px;
width: 20px;
height: 20px;
border-radius: 20px;
border: 2px solid white;
}
.box .boxBtm:after {
content: "";
display: block;
background: #EEE;
position: absolute;
bottom: -9px;
right: -9px;
width: 20px;
height: 20px;
border-radius: 20px;
border: 2px solid white;
}
</style>
</head>
<body>
<div class="box">
<p class="boxBtm">text</p>
</div>
</body>
</html>
The code above is rendered as follows: