All CSS Border Styles

Platform: CSS

Published Mar 23, 2007

Updated Feb 11, 2013

2,229 7

I always need these for my CSS development. They're great for making your CSS more visible for debugging. You can include one or all in your main stylesheet and just apply the style to any div you're working on: <div class='solid'>Content</div>

.solid { border: 1px solid #000000; }

.dashed { border: 1px dashed #000000; }

.double { border: 1px double #000000; }

.dotted { border: 1px dotted #000000; }

.groove { border: 1px groove #000000; }

.inset { border: 1px inset #000000; }

.outset { border: 1px outset #000000; }

.ridge { border: 1px ridge #000000; }

Comments

Hawkee - Aug 13, 2009

Thanks Korvin, was a slight oversight.

Respond

Korvin - Aug 13, 2009

<div style='solid'>Content</div>
wouldnt that be:
<div class='solid'>Content</div>

Respond

FireFly - Sep 11, 2008

Of course it's useful for cross-browser testing, but when I'm struggling with the CSS, I usually use the Web developers' toolbar, an addon for FireFox.
(Though I use Opera for my general browsing and website testing.)

Respond

Hawkee - Jun 23, 2008

Yeah, or just use #000 as I\'ve been doing lately.

Respond

vaseline28 - Jun 21, 2008

And obviously you can change #000000 to whichever color you would like!

Respond

Hawkee - Mar 25, 2007

Of course, but I mostly use this for debugging CSS code.

Respond

Noutrious - Mar 25, 2007

btw, you can change the 1px to 2px etc., to get bigger border.

Respond