Рамка выводится поверх фона элемента. Если в рамке есть разрывы (например, рамка пунктирная), то через разрывы виден фон.

Каждый элемент имеет четыре рамки, которые ограничивают своими внешними краями фон элемента.

Каждая рамка имеет три свойства: стиль, ширину и цвет. Для верхней рамки имена этих свойств имеют вид:

• border-top-style
• border-top-width
• border-top-color

Для каждого из трёх свойств рамок имеется обобщённое свойство, например, для ширины — border-width (работает правило четырёх сторон).

Цвет рамки по умолчанию совпадает с цветом текста элемента (с его свойством color). Ширина рамки по умолчанию равна medium, а стиль рамки по умолчанию равен none, то есть если стиль рамки явно не задан, она будет отсутствовать (несмотря на все другие её свойства).

Для каждой стороны коробки элемента предусмотрено отдельное свойство, при помощи которого можно задавать стиль, ширину и цвет рамки, соответственно, сверху, справа, снизу и слева:

• border-top
• border-right
• border-bottom
• border-left

Наконец, есть самое общее свойство border. С помощью него можно задавать стиль, ширину и цвет одновременно для всех рамок элемента.

Получается, что с рамками элемента связано 21 стилевое свойство.

Стиль — самый важный параметр рамки. Если он не задан, рамки не будет, ведь по умолчанию стиль имеет значение none (отсутствие рамки).

Значение hidden эквивалентно значению none, за исключением случая применения к таблицам.

Ниже приводятся образцы рамок каждого стиля. Дополнительно задана ширина в 10 пикселов (правило для ширины в кодах опущено).

У абзаца верхняя рамка со стилем dotted.

border-top-style:dotted;

У абзаца верхняя рамка со стилем dashed.

border-top-style:dashed;

У абзаца верхняя рамка со стилем solid.

border-top-style:solid;

У абзаца верхняя рамка со стилем double.

border-top-style:double;

У абзаца рамки со стилем groove. Для рамки задан красный цвет.

border-top-style:groove;
border-right-style:groove;
border-bottom-style:groove;
border-left-style:groove;
border-color:red;

У абзаца рамки со стилем ridge. Для рамки задан цвет lime.

border-top-style:ridge;
border-right-style:ridge;
border-bottom-style:ridge;
border-left-style:ridge;
border-color:lime;

У абзаца рамки со стилем inset. Для рамки задан цвет lime.

border-top-style:inset;
border-right-style:inset;
border-bottom-style:inset;
border-left-style:inset;
border-color:lime;

У абзаца рамки со стилем outset. Для рамки задан цвет lime.

border-top-style:outset;
border-right-style:outset;
border-bottom-style:outset;
border-left-style:outset;
border-color:lime;

В качестве примера рассмотрим правило:

border-style:dotted solid dashed;
border-color:olive; /* цвет рамок */
           

По правилу четырёх сторон недостающий стиль слева повторяет стиль справа (solid). Вот результат:

Для этого абзаца задан стиль рамки, приведённый выше.

Размеры, задаваемые ключевыми словами thin, medium (значение по умолчанию) и thick, зависят от браузера. При этом гарантировано, что рамка thick всегда шире, чем medium, которая, в свою очередь, всегда шире thin.

Ниже приводятся несколько примеров.

У абзаца рамки с шириной thin.

P
{           
  border-style:solid;
  border-top-width:thin;
  border-right-width:thin;
  border-bottom-width:thin;
  border-left-width:thin;
}
           

У абзаца рамки с шириной medium.

P
{           
  border-style:solid;
  border-top-width:medium;
  border-right-width:medium;
  border-bottom-width:medium;
  border-left-width:medium;
}
           

У абзаца рамки с шириной thick.

P
{           
  border-style:solid;
  border-top-width:thick;
  border-right-width:thick;
  border-bottom-width:thick;
  border-left-width:thick;
}
           

У абзаца рамки с шириной 1px.

P
{           
  border-style:solid;
  border-top-width:1px;
  border-right-width:1px;
  border-bottom-width:1px;
  border-left-width:1px;
}
           

В качестве примера рассмотрим определение:

P
{           
  border-style:solid;
  border-width:2px 20px;
}
           

Результат:

Для этого абзаца заданы правила, приведённые выше.

Значение transparent (прозрачность) браузером IE поддерживается только с 7 версии.

Ниже приводятся несколько примеров.

Для каждой рамки в этом абзаце задан свой собственный цвет.

P
{           
  border-style:solid;
  border-width:10px;
  border-top-color:red;
  border-right-color:rgb(0,0,255);
  border-bottom-color:#ffbf00;
  border-left-color:lime;
}
           

Для рамки задан только стиль. Её цвет совпадает с цветом текста, а ширина имеет значение medium.

P
{           
  color:maroon;
  border-style:solid;
}
           

В качестве примера рассмотрим определение:

P
{           
  border-style:solid;
  border-width:2px 20px;
  border-color:blue red black;
}
           

Результат:

Для этого абзаца заданы правила, приведённые выше.

В качестве примера рассмотрим определение:

P
{  
  color:black;
  border-top:solid;
  border-right:solid 10px;
  border-bottom:dotted 10px red;
  border-left: blue 20px;
}
           

Результат:

Для этого абзаца заданы правила, приведённые выше.

Порядок следование свойств в наборе не важен, кроме того, отдельные свойства можно опускать, но только не стиль рамки — нет стиля, нет рамки.

В качестве примера рассмотрим определение:

P
{ 
  color:black;
  border:2px solid red;  
}
           

Результат:

Для этого абзаца задано стилевое определение, приведённое выше.

Заданные значения применяются ко всем четырём сторонам рамки.

Порядок следование свойств в наборе не важен, кроме того, отдельные свойства можно опускать, но только не стиль рамки — нет стиля, нет рамки.

Граница внешнего отступа <EM>выделения</EM> показана красным пунктиром условно.

  
EM
{
  margin-top:500px; 
  margin-right:50px; 
  margin-bottom:500px; 
  margin-left:50px; 
}
      

Разное поведение сверху и снизу объясняется порядком вывода строк на экран.

  
EM
{
  border: 20px solid #ffbf00;
}