We would like to know how to create Double border with different color.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.double-border {
background-color: #ccc;
border: 4px solid #fff;
padding: 2em;
width: 16em;
height: 16em;
position: relative;
}<!-- ww w. ja va 2 s . co m-->
.double-border:before {
background: none;
border: 4px solid #666;
content: "";
display: block;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
pointer-events: none;
}
</style>
</head>
<body>
<div class="double-border">
Parent element border in white,
pseudo-element border in grey.</div>
</body>
</html>
The code above is rendered as follows: