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

Comments

Sign in to comment.
Hawkee   -  Aug 13, 2009

Thanks Korvin, was a slight oversight.

 Respond  
Korvin   -  Aug 13, 2009
Content

wouldnt that be:

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