Using the Border-Width Property

Using the border-width property, you can set all four borders at once, as follows:

• One value is set That value applies to all four sides.

• Two values are set The top and bottom borders are set to the first value, and the right and left borders are set to the second.

• Three values are set The top border is set to the first value, the right and left borders are set to the second, and the bottom border is set to the third.

• Four values are set The values are applied in top, right, bottom, and left order.

The following are examples of code for using the border-width property in various ways:

 /* All borders are set the same, to 2em. */ BODY { border-width: 2em } /* Top and bottom = 1em; right and left = 2em. */ BODY { border-width: 1em 2em } /* Top = 1em, right = 2em, bottom = 3em, left = 2em. */ BODY { border-width: 1em 2em 3em } /* All borders are set and are applied in    top/right/bottom/left order. */ BODY { border-width: 1em 3em 5em 7em }