This page includes examples of the many border styles and controls in CSS and tests for how well they are displayed in four popular browsers.
CSS borders may be applied with many different attributes to create many different styles.
This paragraph (a block-level element) has all of its attributes in one declaration: .b1 {border: medium solid #000000;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-width property with value thin: .bw1 {border-width: thin;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-width property with value 1ex: .bw2 {border-width: 1ex;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-width property with value thick: .bw3 {border-width: thick;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-width property with value 5px: .bw4 {border-width: 5px;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-width property with value 1em: .bw5 {border-width: 1em;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-style property with value none: .bs1 {border-style: none;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-style property with value hidden: .bs2 {border-style: hidden;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-style property with value dotted: .bs3 {border-style: dotted;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-style property with value dashed: .bs4 {border-style: dashed;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-style property with value solid: .bs5 {border-style: solid;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-style property with value double: .bs6 {border-style: double;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-style property with value groove: .bs7 {border-style: groove;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-style property with value ridge: .bs8 {border-style: ridge;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-style property with value inset: .bs9 {border-style: inset;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-style property with value outset: .bs10 {border-style: outset;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-color property with value red: .bc1 {border-color: red;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-color property with value rgb(0,255,0): .bc2 {border-color: rgb(0,255,0);}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-color property with value #0000ff: .bc3 {border-color: #0000ff;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-top-width property with value thin: .btw {border-top-width: thin;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-top-color property with value #ffff00: .btc {border-top-color: #ffff00;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-top-style property with value dotted: .bts {border-top-style: dotted;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-right-width property with value medium: .brw {border-right-width: medium;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-right-color property with value #00ffff: .brc {border-right-color: #00ffff;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-right-style property with value solid: .brs {border-right-style: solid;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-bottom-width property with value thick: .bbw {border-bottom-width: thick;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-bottom-color property with value #ff00ff: .bbc {border-bottom-color: #ff00ff;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-bottom-style property with value outset: .bbs {border-bottom-style: outset;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-left-width property with value 2px: .blw {border-left-width: 2px;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-left-color property with value #cccccc: .blc {border-left-color: #cccccc;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
This paragraph (a block-level element) demonstrates the border-left-style property with value groove: .bls {border-left-style: groove;}. This style may also apply to inline elements, in order to emphasize or embellish certain points or areas visually without changing the actual text.
In testing this page's code in Firefox 1.5, Internet Explorer 6, Netscape 8, and Opera 8.51, I was unable to find any errors is display. In fact, the only difference is in the treatment of inline borders. Sometimes they line wrap as a whole and sometimes are broken and the boxes actually split.