4. Рамки

На этой странице:

Четыре рамки элемента

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

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

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

  • 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, за исключением случая применения к таблицам.

border-top-style, border-right-style, border-bottom-style, border-left-style
Значения: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
По умолчанию: 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). Вот результат:

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

border-style
Значения: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
правило четырёх сторон
По умолчанию: для обобщённого свойства не определено
Область применения: все элементы
Наследование: нет

Вверх Ширина рамок

Ширина рамки отдельно для каждой стороны

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

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

border-top-width, border-right-width, border-bottom-width, border-left-width
Значения: thin | medium | thick | <размер> | inherit
По умолчанию: medium
Область применения: все элементы
Наследование: нет

У абзаца рамки с шириной 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;
}
           

Результат:

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

border-width
Значения: thin | medium | thick | <размер> | inherit
правило четырёх сторон
По умолчанию: не определено для обобщённого свойства
Область применения: все элементы
Наследование: нет

Вверх Цвета рамок

Цвет рамки отдельно для каждой стороны

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

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

border-top-color, border-right-color, border-bottom-color, border-left-color
Значения: <цвет> | transparent | inherit
По умолчанию: значение свойства color элемента
Область применения: все элементы
Наследование: нет

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

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;
}
           

Результат:

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

border-color
Значения: <цвет> | transparent | inherit
правило четырёх сторон
По умолчанию: не определено для обобщённого свойства
Область применения: все элементы
Наследование: нет

Вверх Свойства рамок отдельно для каждой стороны

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

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

Результат:

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

border-top, border-right, border-bottom, border-left
Значения: [<border-style> <border-width> <border-color> ] | inherit
либо набор из трёх свойств, либо inherit
По умолчанию: не определено
Область применения: все элементы
Наследование: нет

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

Вверх Задание рамки одним свойством

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

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

Результат:

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

border
Значения: [<border-style> <border-width> <border-color> ] | inherit
либо набор из трёх свойств, либо inherit
По умолчанию: не определено
Область применения: все элементы
Наследование: нет

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

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

Вверх Рамки строчных элементов

Как вы помните, внешние отступы строчных элементов работают только по горизонтали. Высоту текущей строки внешние отступы не меняют. Можно считать, что по вертикали внешние отступы накладываются на соседние строки — они ведь прозрачные по определению.

Внешние отступы строчных элементов

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

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

Рамки строчных элементов ведут себя подобным образом — по горизонтали они отодвигают соседние элементы, а по вертикали совмещаются с ними, при этом верхняя строка перекрывается, а нижняя выводится поверх рамки.

Рамки строчных элементов

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

  
EM
{
  border: 20px solid #ffbf00;
}
      

Отмеченная особенность относится только к строчным незамещаемым элементам, то есть к таким, содержание которых включено в HTML-код документа (например, текст). Рамки строчных замещаемых элементов (таких как картинки) работают как рамки блочных элементов (то есть отодвигают соседей и по горизонтали, и по вертикали).