We would like to know how to leave blank border in the corners.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!--from www. j ava2 s.c om-->
width: 20px;
height: 20px;
padding: 6px;
position: relative;
}
div:before, div:after {
content: '';
border: 6px solid transparent;
position: absolute;
}
div:before {
left: 2px;
right: 2px;
top: 0;
bottom: 0;
border-top-color: black;
border-bottom-color: black;
}
div:after {
top: 2px;
bottom: 2px;
left: 0;
right: 0;
border-right-color: black;
border-left-color: black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
The code above is rendered as follows: