How to Use Border in CSS

CSS Box Model

The Cascading Style Sheet (CSS) property called border will add borders around the outside of the content and padding of any element in your HTML document. Border is part of the CSS box model. Border is added between the content of the element with its padding and the margin of the element. Here is how to use border.

Things You'll Need

• A plain text editor to write the style rules
• A web page in development

Instructions

1. In a CSS stylesheet, each side of an element can have a different border, or no border. You can set each side's border individually. When individually set, border values in the CSS should be given from top, right, bottom and left.

2. For each border that you use, you must provide values for border-width, border-style and border-color.

3. Border-width can be expressed as thin, medium, thick or with a value given in pixels, ems or percent.

4. Border-color can be any color value you desire.

5. Border-style can be none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset or inherit.

6. Here's an example rule (it uses shorthand to style a paragraph element with thin blue solid borders on all four sides):

   p {
   border: thin blue solid;
   }

7. If you want different values for the borders, you must write out a more verbose rule. For example:

   p {
   border-top: none;
   border-right: thin blue solid;
   border-bottom: medium blue solid;
   border-left: thin gray solid;
   }

Tips & Warnings

• Not all browsers display every border-style value properly.

Resources

• How to Understand the CSS Box Model