Исполняемые доки CSS: Рамка border

Q: Почему не отображается рамка в CSS?

Почти всегда потому, что не задан стиль рамки. border: 2px #2563eb; или только border-color: red; ничего не рисуют, ведь border-style по умолчанию none. Добавьте solid, dashed или другой стиль.

Q: Как сделать скругленные углы в CSS?

Используйте border-radius: border-radius: 8px; скругляет все четыре угла. border-radius: 50%; на квадрате дает круг, а большое значение вроде 999px делает форму таблетки. Фон тоже скругляется, даже без рамки.

Q: Как сделать рамку только с одной стороны?

Используйте свойство стороны: border-bottom: 2px solid #e5e7eb; или border-inline-start для стороны, с которой начинается текст, это работает и для языков справа налево.

Сокращенная запись border

border рисует линию вокруг элемента, между его padding и margin. Сокращенная запись принимает три части в любом порядке: толщину, стиль и цвет.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

Часть	Полное свойство	Значения	По умолчанию
Толщина	`border-width`	`1px`, `0.2em`, `thin`, `medium`, `thick`	`medium`
Стиль	`border-style`	`solid`, `dashed`, `dotted`, `double` и другие	`none`
Цвет	`border-color`	Любой цвет	`currentColor` (цвет текста)

Без стиля не обойтись. По умолчанию он none, поэтому border: 2px #2563eb; вообще ничего не рисует. Если не указать цвет, рамка возьмет цвет текста элемента.

Стили рамки

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double нужно минимум 3px, чтобы показать две линии. groove, ridge, inset и outset затеняют цвет для объемного вида и немного различаются в разных браузерах. hidden выглядит как none; они различаются только в таблицах со схлопнутыми рамками, об этом страница про рамки таблиц в HTML.

По одной стороне

У каждой стороны своя сокращенная запись (border-top, border-right, border-bottom, border-left), а у каждой части есть полные свойства для сторон, например border-top-color. Логические версии, border-inline-start и border-block-end, следуют направлению текста:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width и border-style принимают от одного до четырех значений в том же порядке по часовой стрелке, что и padding: верх, право, низ, лево.

Скругленные углы через border-radius

border-radius скругляет углы рамки и фона, поэтому работает и у элементов совсем без рамки.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

Значение	Результат
`border-radius: 8px`	Все углы скруглены на 8px
`border-radius: 50%`	Круг на квадратном элементе, эллипс на прямоугольном
`border-radius: 999px`	Таблетка: короткие стороны становятся полными полукругами
`border-radius: 8px 0`	Левый верхний и правый нижний по 8px, два других прямые
`border-top-left-radius: 12px`	Только один угол
`border-radius: 50% / 25%`	Эллиптические углы: горизонтальный радиус / вертикальный радиус

Дочерний элемент с фоном может торчать за скругленными углами родителя. overflow: hidden у родителя обрезает его по кривой.

Border и outline

Outline выглядит как рамка, но рисуется снаружи нее и не занимает места, поэтому его добавление ничего не сдвигает. Поэтому браузеры и рисуют обводку фокуса через outline.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

	Border	Outline
Занимает место	Да, часть размера блока	Нет
По сторонам	Да (`border-top`, ...)	Нет, только вокруг целиком
Следует `border-radius`	Да	Да, в актуальных браузерах
Отступ от блока	Нет	Да, `outline-offset`
Типичное применение	Дизайн	Индикаторы фокуса, отладка

Частые ошибки

Нет стиля рамки. border: 1px #111827; и border-color: red; ничего не рисуют. Добавьте solid (или другой стиль).
Рамка при наведении сдвигает раскладку. Зарезервируйте место прозрачной рамкой или используйте outline или box-shadow.
Забыли рамку в расчете ширины. Элемент с width: 100% и рамкой вылезает из контейнера при content-box. Используйте box-sizing: border-box.
border-radius, а дочерний элемент торчит из углов. Добавьте скругленному родителю overflow: hidden.
Удаление обводки фокуса через outline: none. Пользователям клавиатуры она нужна; измените стиль outline, а не удаляйте его.

Часто задаваемые вопросы

Как добавить рамку в CSS?

Используйте сокращенную запись с толщиной, стилем и цветом: border: 2px solid #2563eb;. Главное здесь стиль: без него border-style равен none, и рамка не рисуется.

Почему не отображается рамка в CSS?

Почти всегда потому, что не задан стиль рамки. border: 2px #2563eb; или только border-color: red; ничего не рисуют, ведь border-style по умолчанию none. Добавьте solid, dashed или другой стиль.

Как сделать скругленные углы в CSS?

Используйте border-radius: border-radius: 8px; скругляет все четыре угла. border-radius: 50%; на квадрате дает круг, а большое значение вроде 999px делает форму таблетки. Фон тоже скругляется, даже без рамки.

Как сделать рамку только с одной стороны?

Используйте свойство стороны: border-bottom: 2px solid #e5e7eb; или border-inline-start для стороны, с которой начинается текст, это работает и для языков справа налево.

Чем border отличается от outline?

Border это часть блока: он занимает место и меняет размер элемента. Outline рисуется снаружи рамки, не занимая места, не задается по сторонам, и именно его браузеры используют для обводки фокуса. В актуальных браузерах оба следуют border-radius.

Связанные концепции