Свойство 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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Линия</title>
  <style>
   blockquote {
    background: #d2f7ff; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
    border-left: 2px solid #0069b5; /* Параметры линии */
   }
  </style>
 </head>
 <body>
  <blockquote>
   Фьюжн начинает форшлаг.
  </blockquote>
 </body>
</html>

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

<blockquote> с линией

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Линия</title>
  <style>
   blockquote {
    background: #d2f7ff; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
    border: 5px dotted #0069b5; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
  <blockquote>
   Фьюжн начинает форшлаг.
  </blockquote>
 </body>
</html>

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

Линия поверх фона

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Линия</title>
  <style>
   blockquote {
    background: #0069b5; /* Цвет фона */
    color: #fff; /* Белый цвет текста */
    padding: 10px; /* Поля вокруг текста */
    border: 5px dashed #0069b5; /* Параметры рамки */ 
    background-clip: padding-box; /* Фон внутри рамки */
   }
  </style>
 </head>
 <body>
  <blockquote>
   Фьюжн начинает форшлаг.
  </blockquote>
 </body>
</html>

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

Пунктирная рамка

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

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

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Линия</title>
  <style>
   blockquote {
    background: #d6eff8; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
    border: 2px solid #0069b5; /* Параметры синей рамки */
    outline: 2px solid #c52b1c; /* Параметры красной рамки */
    outline-offset: 3px; /* Смещение красной рамки */
   }
  </style>
 </head>
 <body>
  <blockquote>
   Фьюжн начинает форшлаг.
  </blockquote>
 </body>
</html>

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

Две рамки

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

Перейти к заданиям

Рамка

Создайте блок с рамкой, как показано на рис. 1. В браузере IE вид может отличаться.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рамка</title>
  <style>
   div {
    background: #B2D235; /* Цвет фона */
    padding: 40px; /* Поля вокруг текста */
    outline: 2px solid #fff; /* Параметры рамки */
    outline-offset: -20px; /* Смещение рамки */
   }
  </style>
 </head>
 <body>
  <div>
   По мере нашего продвижения страна, как и ее обитатели, 
   становилась все более дикой и прекрасной. Теперь мы двигались 
   сквозь сосновые леса с островками дубовых рощ, зарослей 
   красивого кустарника и папоротника. 
  </div>
 </body>
</html>

Рамка таблицы

Создайте таблицу, как показано на рис. 1.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рамка таблицы</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse;
    background: #B6DEC2; /* Цвет фона таблицы */
   }
   th, td {
    border: 2px solid #fff; /* Параметры рамки */
    padding: 7px; /* Поля в ячейках */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Имя</th><th>Оружие</th></tr>
   <tr><td>Леонардо</td><td>Катаны</td></tr>
   <tr><td>Рафаэль</td><td>Кинжалы-сай</td></tr>
   <tr><td>Донателло</td><td>Шест-бо</td></tr>
   <tr><td>Микеланджело</td><td>Нунчаки</td></tr>
  </table>
 </body>
</html>

Рамка вокруг текста

Придумайте три способа создания рамки, показанной на рис. 1.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рамка</title>
  <style>
  .box {
  background: #86328C; /* Цвет фона */
  color: #fff; /* Цвет текста */
  padding: 1em; /* Поля вокруг текста */
  border: 6px double #fff; /* Параметры рамки */
  }
  </style>
 </head>
 <body>
<p class="box">Рамка вокруг текста</p>
 </body>
</html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 27.12.2018
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid