CSS Borders

CSS Coding Tutorials | Submited Jan 16, 2008

Written by: Mr. Evil [BOFH]

Notes

[Style Tags]
If you don't define a color for the border it will be the same as the text.
I prolly eft out somethings, because I'm a n00b.

border-styles

Soon enough I'll do some screenshots to show you what each one's look like, but you can mess around with them your self, no?

none | hidden | dotted
dashed | solid | double
groove | ridge |inset
outset

Note

When using dotted, anything less than 3px won't work.

Border-widths

I prefer using px/em/pt values, but these are also available.

Thin | Medium | Thick

border-width:medium;

border-width:3px;

Note

Thin = 1px
Medium = 3px
Thick = 5px

Border-colors

W3C color names | Color Picker

You could define a border color in several ways, using shorthand(1-2) or the opposite(3-4)

border:2px solid #FF0000;
border:2px solid red;

border-color:#FF0000;
border-color:red;

Both will give you a red border.

Selective borders

You can select what the borders look like on each side of whatever you're putting the border on.
There's like 10 variations on doing this, they're listed in nno order, and only as I can remember them.

border-top:2px solid #ff0000;
border-left:3px dashed #999999;
border-bottom:4px dotted #000000;
border-right:5px double #333333;

Note

in order::.
top left bottom right

border-width:2px 3px 4px 5px;

border-color:#ff0000 #333333 #999999 #ffffff;

border-style: solid dashed dotted ridged;

More

There's more, there's a different property for each side/style/color/width. ugh.

border-top-width:2px;
border-left-width:3px;
border-bottom-width:4px;
border-right-width:5px;

border-top-color:#ff0000;
border-left-color:#333333;
border-bottom-color:999999;
border-right-color:#ffffff;

border-top-style:solid;
border-left-style:dashed;
border-bottom-style:dotted;
border-right-style:ridged;

border-top:2px solid #ff0000;
border-left:3px dashed #333333;
border-bottom:4px dotted #999999;
border-right:5px ridged #ffffff;

Rounded borders

Very simple, but, as luck would have it, it only works in Firefox, noticing a trend?

-moz-border-radius:10px;

There is a way to do rounded borders in IE using images, and the :before/:after pseudo-selectors.