All CSS Border Styles

By Hawkee on Mar 23, 2007

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; }


Sign in to comment.
Hawkee   -  Aug 13, 2009

Thanks Korvin, was a slight oversight.

Korvin   -  Aug 13, 2009

wouldnt that be:

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.)

Hawkee   -  Jun 23, 2008

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

vaseline28   -  Jun 21, 2008

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

Hawkee   -  Mar 25, 2007

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

Noutrious   -  Mar 25, 2007

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

Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.