Playing with CSS3 and overlapping borders

I needed a dotted border for a project I am working. No problem. Right?


border: dotted 3px #bbb;

Except that I needed to connect the dots. To do that I needed to overlay one border on top of another. The best way to do that right now is with :after positioned absolute.


.dash {
position: relative;
box-shadow: inset 0 0 0 1px #fff,
inset 0 0 1px 1px #000;
}

.dash:after {
content: '';
box-sizing: border-box;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
border: dotted 3px #bbb;
}

Notice that I used box-sizing: border-box; to get my border on the inside where I need it.

Worked out pretty nice. I also added:

border-left: 3px solid white;
border-right: 3px solid white;

Since I only needed the border on the top and bottom. I would have to get a bit more creative if I had a textured background.

Leave a Reply

Your email address will not be published. Required fields are marked *