1. Technology

CSS Border Styles

Use Cascading Style Sheets to Change Border Styles


Why are borders often so boring? CSS gives you a lot of options for dressing up your borders and yet most Web designers, if they modify the borders at all, focus on creating a border that is just a thin black (sometimes another color) solid line. While it's perfectly acceptable to create borders like that, it means that your Web page designs are going to look a lot like every other Web page designed with CSS.

The standard border is written in CSS as:

border-style: solid;
 border-width: 1px;
 border-color: black;

Or in shorthand as:

border: solid 1px black;

There's nothing wrong with this border, it's just boring.

Hopefully, after you've read this article, you'll have a better appreciation of the options you have for styling your borders, and you won't limit yourself to just a plain black or colored border.

Border Widths

Using the border-width property, you can define the width of the border as precisely as you would like. Or you can leave it up to the Web browser. There are three default widths for the border-width property:

border-width: thin;
 border-width: medium;
 border-width: thick;

If you use these border widths, your customer's Web browser will determine how wide or narrow to make the border. In general, however, the widths are approximately:

  • thin - 1 to 2 pixels
  • medium - 2 to 5 pixels
  • thick - 5 to 10 pixels

Here's an example of these three standard widths.

Turn Off the Border

It might not make sense to turn off the border, after all, most elements in HTML have the border hidden or off by default. But for elements like images it's a good idea to tell the browser to leave the border off. That way, if you make the image a link, it won't appear in your design with an ugly colored border around it.

It is simple to turn off the borders on images, just add the border-style property to your images:

border-style: none;

See how linked images look with and without borders.

There is also a border-style: hidden which is similar to the border-style: none style. The only difference between hidden and none is that the hidden style prevents any other border from displaying around that element when using the collapsing borders model in CSS 2.

See (or not see?) a hidden border.

Style Your Borders - More Than Just Solid

There are 7 border styles you can use that go beyond the plain solid border. The following samples all use a black border that's 20 pixels wide, but as you can see from the examples, they look very different:

The first three styles (dotted, dashed, and double) work in every modern browser. The four starred (*) styles (groove, ridge, inset, and outset) do not work in Internet Explorer.

©2014 About.com. All rights reserved.