Better Dotted CSS Borders Using The :After Pseudo Selector

As a developer you’re sometimes given a web design that has certain elements that theoretically can be done with CSS, but don’t look quite the same. One of those I recently discovered isn’t quite the same are dotted borders. If your designer uses Photoshop as their web design tool of choice, there’s a high chance any dotted borders in a design are in fact decimals, styled text.

While not all designers would care if their dotted borders don’t look the same, like I did recently the difference can really affect a design. I came up with a crafty solution that allows you to create dotted CSS borders the Photoshop way. This only works if it’s a line on top or bottom, not a dotted border that wraps around an element.

The following code is what I recently used on a project, tweak to suit your tastes:

[code]

/* This is most likely a DIV element that uses this class, but it can be anything */

.dotted-rule {

/* Probably unneeded if the element using this class is a DIV */
display: block;

/* This helps stop the element being taller than it should be */
line-height: 1;

/* A space of 5px top and bottom of our dotted border */
margin: 5px 0 5px 0;

/* Overflow hidden will stop the :after pseudo dots extending past the width of our element. */
overflow: hidden;

/* We don’t want any padding */
padding: 0;
}

/* Inserts a whole bunch of dots after the dotted rule element */
.dotted-rule:after {

/* The colour of our border */
color: #FFF;

/**
* Use as many dots here as you like, I put more than I need and let the overflow: hidden above restrict it to only display the width of the element.
* Try experimenting with different characters for awesome borders like triangles or something, be creative.
*/
content: ‘………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………’;

/* This is very important, our text won’t flow or display correctly without it */
display: block;

/* Letter spacing helps space out our dots. It controls the distance between them. */
letter-spacing: 3px;

/**
* A negative margin will most likely be needed to bring the rule border up an acceptable position, otherwise by default it might sit lower.
* This negative margin matches the amount of margin we’ve put on-top of the dotted rule above.
*/
margin-top: -5px;
}

[/code]