Borders and the box model

Borders

Borders allow you to specify the border around some element. Borders are used to visually separate elements, and also for debugging pages (especially when you are creating positionable elements.) Each border has three distinctive parameters: border-width, border-style, and border-color. These elements can be described individually, or combined into one border attribute.

border-width

The border-width attribute describes how wide the border will be drawn. It uses the same measurement types as any length measurement in CSS, but most programmers use pixels (px) to describe border size. Here are some example paragraphs with the same border type and color, but various sizes:

border-style

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

border-color

Border color can be specified with the same color values as any other attribute, using color names or hex values.

combined borders

The easiest way to work with borders is through the border attribute:

p {
  border: 5px groove red;
}

The order in which these elements are described is not important.

The Box Model

Each HTML/XHTML element lives in a box. The box is described in the following diagram: