How to Add Borders Using CSS

This technique shows you to set borders and different border styles on an object.

Steps to Adding Add Borders Using CSS

Start by creating the object you want to have borders on.

<div id="box">
This is the object that will have a border.
</div>

Now you must use CSS elements to add the border.

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

If we break down the element, it clearly shows us what the border will look like on the object.

1. 1px means, the width of the border.
2. Solid is the style of the border.
3. #000000 is the color of the border, which is black.

Changing the Style of the Border Using CSS

dashed: Shows a dashed border

double: Shows a double border

solid: Shows a solid border

outset: Shows a outset border

inset: Shows a inset border

ridge: Shows a ridge border

groove: Shows a groove border

Browser Support

This method has been tested in Firefox, IE 6, 7,Safari and Opera.

Conclusion

The code used is the standard technique for adding borders using CSS.