Свойство border

Свойство border добавляет вокруг элемента рамку заданной толщины, стиля и цвета. Для создания линий на отдельных сторонах элемента используются свойства border-top, border-right, border-bottom и border-left, соответственно устанавливающие линию сверху, справа, снизу и слева. Так же эти свойства могут быть использованы и чтобы убрать линию на определённой стороне.

border: 2px solid #0069b5; /* Параметры рамки */
border-left: none; /* Убираем линию слева */
border-right: none; /* Убираем линию справа */

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

Сама рамка идёт после содержимого элемента и пустого пространства, создаваемого padding (рис. 1). Если свойство padding не задано, то рамка начинается сразу вокруг содержимого.

Рис. 1. Положение рамки в элементе

В примере 1 показано добавление линии слева от цитаты с помощью свойства border-left.

Пример 1. Использование border-left

Результат данного примера показан на рис. 2.

Рис. 2. <blockquote> с линией

Расстояние от рамки до содержимого регулируется с помощью свойства padding. Сами линии отображаются поверх цветного фона, что становится заметно, когда добавляется пунктирная или точечная линия. В примере 2 показано добавление такой линии.

Пример 2. Точечный пунктир

Результат данного примера показан на рис. 3.

Рис. 3. Линия поверх фона

Поведение фона в подобных случаях можно изменить с помощью свойства background-clip. К примеру, значение padding-box будет выводить фон внутри границ, а content-box внутри содержимого. Это позволяет создавать интересной формы блоки, если задать единый цвет рамки и фона и воспользоваться свойством background-clip (пример 3).

Пример 3. Использование background-clip

Результат данного примера показан на рис. 4.

Рис. 4. Пунктирная рамка

Свойство border является частью блока и влияет на его размеры. Альтернативой border выступает свойство outline. Вот его особенности:

• outline не влияет на размеры и положение самого элемента;
• outline не занимает место, не влияет на окружающие элементы и отображается поверх них;
• для outline нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам;
• свойство border-radius, задающее радиус скругления рамки, не действует на outline;
• outline можно расширять и сжимать с помощью outline-offset, отрицательное значение выводит рамку внутри элемента.

Свойство outline не заменяет border и вполне может существовать вместе с ним. В примере 4 показано сочетание этих свойств.

Пример 4. Использование outline

Результат данного примера показан на рис. 5.

Рис. 4. Две рамки