I love seeings designs that push the boundaries of CSS. It’s a great feeling to think that a particular component just isn’t possible, only to come across a lovely, clean, cross-browser compatible solution. With CSS3 trail-blazing a new frontier for modern web design, some pretty incredible things are now possible.
But there are still a few sticky points. There are some elements that look beautiful in Photoshop but horrible on the web.
In this case, I’m looking at you, border-style.
Our main options here are solid, dashed, and dotted, with a border-width, and a border-color. So what do we do when our design looks like this?
Well, we whip out the border-style: dashed, and this is what we get:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="dashed-borders">
<p>Horrible Dashes</p>
</div>
</div>
</body>
</html>.dashed-borders {
background: #1d4a91;
}
.dashed-borders:before {
content: "";
display: block;
height: 5px;
width: 100%;
margin-top: 40px;
background-color: #2356a1;
border-top: 2px dashed #091f5c;
border-bottom: 2px solid #091f5c;
box-shadow: 0 7px 0 0 #183f84;
}
.dashed-borders:after {
content: "";
display: block;
height: 5px;
width: 100%;
margin-bottom: 40px;
background-color: #2356a1;
border-bottom: 2px dashed #091f5c;
border-top: 2px solid #091f5c;
box-shadow: 0 -7px 0 0 #183f84;
}.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 300px;
height: 300px;
margin: auto;
background: #2356a1;
}p {
font-family: Pacifico, cursive;
text-align: center;
padding: 15px 20px;
font-size: 40px;
color: #fff;
line-height: 1.2;
}
Yikes! Not the same. So what are our options? Searching around leads to a few options, none great, some downright weird:
- Background image (Don’t pick this one.)
- Border-image
- Pseudo elements??
Before you go out and discover the nuances of each of these approaches, consider a fourth approach: gradients.The result:http://codepen.io/thephuse/pen/RNwpVO/Want an even fancier dashed border? Fork the code on codepen.io and try out all the possibilities!
