CSS GUIDE BORDER WIDTH

From CDOT Wiki
Jump to: navigation, search

This document is a work in progress and is subject to change.

Summary

Border width property sets the width of the four borders in one declaration. This property does not work alone and has to be used with border-style.

Syntax

Can have from one to four values.

border-width: [top_left_bottom_right_width]
border-width: [top_bottom_width left_right_width]
border-width: [top_width left_right_width bottom_width]
border-width: [top_width right_width bottom_width left_width]

Legal Values

Value Description
thin Defines a thin border
medium Defines a medium border
thick Defines a thick border
length Allows you to define a custom size

Mozilla Recommended Values

Usage Examples

<html>
  <head>
    <style type="text/css">
      p.one 
      {
        border-style: solid;
        border-width: 10px 5px;
      }
      p.two
      {
        border-style: solid;
        border-width: thin medium thick;
      } 
    </style>
  </head>
<body>

  <p classs="one">Some text</p>
  <p class="two">Some text</p>
 
</body>
</html>

Notes

Specification Conformance

CSS1

Browser Compatibility

Firefox,Netscape,Opera,IE

See Also

border-style

border

border-top

border-right

border-bottom

border-left