CSS Border

Border — это линия, нарисованная вокруг краёв блока элемента, между его отступами (padding) и внешними отступами (margin). Рамки — один из наиболее распространённых способов визуально разделить содержимое, выделить блок или создать элементы интерфейса, такие как карточки, кнопки и поля ввода.

У каждой рамки есть три составляющих, которые обычно задаются все вместе:

width — толщина линии (например, 2px, thin, thick).
style — внешний вид линии (например, solid, dashed, dotted). Это единственное свойство, которое обязательно должно присутствовать — без border-style браузер не отобразит рамку вообще, даже если указаны ширина и цвет.
color — цвет линии (например, red, #1c87c9, rgb(0,0,0)).

Эти свойства можно задавать по отдельности: border-width, border-style и border-color, — либо все сразу с помощью сокращённого свойства border. В остальных разделах этой главы рассматривается каждый вариант.

Пример свойства border:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
    <p style="border:3px dashed #ffff00"> Example with a yellow dashed border.</p>
    <p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
  </body>
</html>

Попробуйте сами »

Результат

Border Width

Свойство border-width задаёт ширину рамки.

Ширину можно указать в единицах длины, таких как пиксели (px), em или rem. Также можно воспользоваться одним из трёх предопределённых ключевых слов: thin, medium или thick. Точный размер этих ключевых слов определяется браузером, но выполняется условие thin < medium < thick.

Нельзя использовать border-width отдельно — без border-style это свойство не даст видимого эффекта, поскольку стиль по умолчанию равен none. Всегда задавайте стиль (или используйте сокращённое свойство border) перед указанием ширины.

Свойству border-width можно задать до четырёх значений для независимой настройки каждой стороны — точно так же, как у border-style: одно значение применяется ко всем сторонам, два — к верхней/нижней и левой/правой, четыре — к верхней, правой, нижней и левой сторонам по часовой стрелке.

Пример свойства border-width:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-width-1 {
        border-style: solid;
        border-width: 6px;
      }
      p.border-width-2 {
        border-style: dotted;
        border-width: 1px;
      }
        p.border-width-3 {
        border-style: dotted;
        border-width: medium;
      }
      p.border-width-4 {
        border-style: double;
        border-width: 8px;
      }
      p.border-width-5 {
        border-style: double;
        border-width: thick;
      }
      p.border-width-6 {
        border-style: solid;
        border-width: 3px 12px 6px 18px;
      }
    </style>
  </head>
  <body>
    <h2>The border-width Property</h2>
    <p class="border-width-1">Example with border-width.</p>
    <p class="border-width-2">Example with border-width.</p>
    <p class="border-width-3">Example with border-width.</p>
    <p class="border-width-4">Example with border-width.</p>
    <p class="border-width-5">Example with border-width.</p>
    <p class="border-width-6">Example with border-width.</p>
  </body>
</html>

Попробуйте сами »

Border Color

Свойство border-color задаёт цвет рамки. Цвет можно указать:

именем — название цвета, например "red"
RGB — значение в формате RGB, например "rgb(255,0,0)"
Hex — шестнадцатеричное значение, например "#ff0000"

Нельзя использовать свойство "border-color" самостоятельно — оно не сработает. Сначала задайте стиль рамки с помощью "border-style".

Как правило, эти три свойства записываются вместе в одной строке.

Пример свойства border-color:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.color-one {
        border-style: solid;
        border-color: blue;
      }
      p.color-two {
        border-style: dotted;
        border-color: yellow;
      } 
      p.color-three {
        border-style: solid;
        border-color: DarkBlue orange green red;
      } 
    </style>
  </head>
  <body>
    <h2>The border-color Property</h2>
    <p class="color-one">Example with blue solid border-color.</p>
    <p class="color-two">Example with yellow dotted border-color.</p>
    <p class="color-three">Example with multicolor border-color.</p>
  </body>
</html>

Попробуйте сами »

Обратите внимание на последний абзац: когда свойству border-color задаются четыре значения, они применяются к сторонам сверху, справа, снизу и слева — в порядке по часовой стрелке.

Border Style

Свойство CSS border-style задаёт стиль всех четырёх сторон рамки элемента. Рамки располагаются поверх фона элемента. Свойство может принимать от одного до четырёх значений, что позволяет задать отдельный стиль для каждой стороны. Значение по умолчанию — none.

Border-style поддерживает следующие значения:

dotted
dashed
solid
double
groove
ridge
inset
outset

Вот что означает каждое значение:

dotted — последовательность круглых точек.
dashed — последовательность коротких штрихов.
solid — одна сплошная линия. Наиболее распространённый стиль.
double — две параллельные сплошные линии. Суммарная ширина равна значению border-width.
groove — создаёт впечатление, что рамка врезана в страницу (3D-эффект).
ridge — противоположность groove; рамка выглядит выступающей.
inset — весь блок кажется вдавленным в страницу.
outset — блок выглядит приподнятым над страницей.

Эффекты groove, ridge, inset и outset зависят от цвета рамки, поэтому они могут выглядеть едва заметно (или быть совсем незаметными) при тонкой рамке или на схожем по цвету фоне. Для чёткого отображения используйте border-width не менее 3px.

CSS Border для отдельных сторон

CSS предоставляет свойства для задания каждой рамки отдельно (правой, левой, нижней и верхней).

Свойство border-style может принимать 4 значения: например, border-style: dotted solid double dashed; — где верхняя рамка точечная, нижняя двойная, правая сплошная, а левая пунктирная.

Свойство border-style может принимать 3 значения: например, border-style: dotted solid double; — где верхняя рамка точечная, нижняя двойная, а правая и левая сплошные.

Свойство border-style может принимать 2 значения: например, border-style: dotted solid; — где правая и левая рамки сплошные, а верхняя и нижняя точечные. И конечно, это свойство может принимать 1 значение: например, border-style: solid; — где все стороны сплошные.

Пример свойств border для отдельных сторон:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top-style: double;
        border-right-style: solid;
        border-bottom-style: dotted;
        border-left-style: groove;
      }
    </style>
  </head>
  <body>
    <p>Example with border individual sides.</p>
  </body>
</html>

Попробуйте сами »

CSS border как сокращённое свойство

Свойство CSS border является сокращённым для следующих отдельных свойств рамки:

Свойство CSS border-width, которое задаёт ширину всех четырёх сторон рамки элемента.
Свойство CSS border-style, которое задаёт стиль всех четырёх сторон рамки элемента.
Свойство CSS border-color, которое задаёт цвет всех четырёх сторон рамки элемента.

Пример сокращённого свойства border:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-all {
        border: 3px solid red;
      }
      p.border-left {
        border-left: 4px solid blue;
        background-color: #dcdcdc;
      }
      p.border-top {
        border-top: 6px solid green;
        background-color: #dcdcdc;
      }
    </style>
  </head>
  <body>
    <h2>The border Shorthand Property</h2>
    <p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
    <p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
    <p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
  </body>
</html>

Попробуйте сами »

Скруглённые рамки

С помощью свойства CSS border-radius можно добавить скруглённые углы к рамке элемента.

Пример свойства border-radius:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.normal {
        border: 3px solid blue;
      }
      p.round-one {
        border: 3px solid blue;
        border-radius: 6px;
      }
      p.round-two {
        border: 3px solid blue;
        border-radius: 9px;
      }
      p.round-three {
        border: 3px solid blue;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <h2>The border-radius Property</h2>
    <p class="normal">Example with normal border</p>
    <p class="round-one">Example with round border</p>
    <p class="round-two">Example with rounder border</p>
    <p class="round-three">Example with roundest border</p>
  </body>
</html>

Попробуйте сами »

Разница между рамками и обводками

Рамка (border) и обводка (outline) обе рисуют линию вокруг элемента, поэтому их легко перепутать. Ключевые различия:

Border является частью блочной модели. Она располагается между отступами (padding) и внешними отступами (margin) и занимает пространство, поэтому добавление рамки может сместить расположение соседних элементов.
Outline рисуется за пределами рамки и не занимает пространства, поэтому никогда не меняет размер или положение элемента и его соседей.
Рамка может иметь разный стиль, ширину и цвет на каждой стороне. Обводка одинакова со всех четырёх сторон.
Обводку можно сместить относительно элемента с помощью outline-offset; рамки сместить нельзя.

Поскольку обводка не влияет на макет, её часто используют для состояния :focus кнопок и ссылок — кольцо фокуса появляется, не сдвигая остальную часть страницы.

Связанные разделы

CSS border-width — управление толщиной каждой стороны.
CSS border-style — все стили линий подробно.
CSS border-color — задание цвета для каждой стороны.
CSS border-radius — скругление углов.
CSS outline — альтернатива рамке без влияния на макет.
CSS padding — пространство внутри рамки.

Практика

Какие из следующих свойств можно использовать для оформления рамок в CSS?

border-styleborder-colorborder-radiusborder-widthborder-font