CSS border — рамки, скругление и стили

border в CSS — рамка вокруг элемента. Задаёт толщину, стиль линии и цвет. border-radius делает углы скруглёнными. Разбираем все варианты от простой рамки до карточек с цветными акцентами.

Синтаксис border — shorthand и развёрнутая запись

Свойство border — shorthand для трёх значений: ширина, стиль и цвет. Все три — обязательны для отображения рамки.

/* Shorthand: width style color */
div { border: 1px solid #e5e7eb; }   /* тонкая светлая рамка */
div { border: 2px dashed #2563eb; }  /* пунктирная синяя */
div { border: 3px dotted #dc2626; }  /* точечная красная */
div { border: 4px solid transparent; } /* прозрачная (место сохраняется) */
div { border: none; }                  /* нет рамки */

/* Развёрнутая запись */
div {
  border-width: 2px;
  border-style: solid;
  border-color: #374151;
}

/* Отдельные стороны */
div { border-top: 3px solid #2563eb; }
div { border-right: 1px solid #e5e7eb; }
div { border-bottom: 2px dashed #ccc; }
div { border-left: 4px solid #16a34a; }

/* Убрать конкретную сторону */
div {
  border: 1px solid #ccc;
  border-top: none;   /* рамка везде кроме верха */
}

border-style — все виды линий

/* Практические примеры стилей */
.card        { border: 1px solid #e5e7eb; }  /* solid — стандарт */
.upload-zone { border: 2px dashed #9ca3af; } /* dashed — зона загрузки */
.divider     { border-bottom: 1px dotted #d1d5db; } /* dotted — разделитель */
.hr-double   { border-top: 3px double #374151; }    /* double — декоративно */

border-radius — скругление углов

border-radius скругляет углы элемента. Значение задаётся в пикселях или процентах. Значение 50% превращает квадрат в круг.

/* Все углы одинаково */
div { border-radius: 8px; }    /* небольшое скругление */
div { border-radius: 16px; }   /* заметное скругление */
div { border-radius: 24px; }   /* сильное скругление */

/* Круг из квадрата */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;  /* идеальный круг */
}

/* "Таблетка" (pill shape) */
.badge {
  border-radius: 9999px;  /* или очень большое число */
  padding: 4px 12px;
}

/* Разные углы: top-left top-right bottom-right bottom-left */
div { border-radius: 16px 16px 0 0; } /* скруглены только верхние */
div { border-radius: 0 16px 16px 0; } /* скруглены только правые */
div { border-radius: 16px 0 16px 0; } /* диагональные */

/* Отдельные углы */
div {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Эллиптические углы (x y) */
div { border-radius: 50px / 30px; }

Практические примеры — карточки и компоненты

/* 1. Стандартная карточка */
.card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 2. Карточка с цветной левой полосой (акцент) */
.card-accent {
  border: 1px solid #e5e7eb;
  border-left: 4px solid #2563eb;  /* синяя полоса слева */
  border-radius: 8px;
  padding: 16px 20px;
  background: white;
}

/* Варианты акцентных карточек */
.card-success { border-left-color: #16a34a; }  /* зелёный */
.card-warning { border-left-color: #d97706; }  /* жёлтый */
.card-danger  { border-left-color: #dc2626; }  /* красный */

/* 3. Кнопка outline */
.btn-outline {
  border: 2px solid #2563eb;
  border-radius: 8px;
  background: transparent;
  color: #2563eb;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-outline:hover {
  background: #2563eb;
  color: white;
}

/* 4. Input поле */
.input {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}

.input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

/* 5. Тег / бейдж */
.badge {
  border: 1px solid #bfdbfe;
  border-radius: 9999px;
  background: #dbeafe;
  color: #1d4ed8;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 500;
}

border-color — отдельные значения для сторон

/* Как margin/padding — 1, 2, 3 или 4 значения */
div { border-color: red; }                        /* все стороны */
div { border-color: red blue; }                   /* top/bottom red, left/right blue */
div { border-color: red blue green; }             /* top red, left/right blue, bottom green */
div { border-color: red blue green yellow; }      /* top right bottom left */

/* Градиентная рамка (через border-image) */
.gradient-border {
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
  /* Важно: border-image не работает с border-radius */
}

/* Альтернатива градиентной рамке — через ::before */
.gradient-border-v2 {
  position: relative;
  border-radius: 12px;
  background: white;
}

.gradient-border-v2::before {
  content: '';
  position: absolute;
  inset: -2px;  /* выходит за край на 2px */
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: inherit;
  z-index: -1;
}

outline — не то же самое, что border

outline похож на border, но не занимает место в layout — не влияет на размер элемента и расположение соседей. Браузеры используют его для индикации фокуса.

/* Outline — вне блочной модели, не занимает место */
button:focus {
  outline: 2px solid #2563eb;
  outline-offset: 3px;  /* отступ между элементом и outline */
}

/* Отличие border vs outline */
.box {
  border: 4px solid red;   /* занимает место, влияет на ширину */
  outline: 4px solid blue; /* снаружи, НЕ влияет на layout */
}

/* ❌ Плохо: убирать outline вовсе (проблема доступности) */
button:focus { outline: none; }

/* ✅ Хорошо: убрать outline, добавить свой стиль */
button:focus { outline: none; }
button:focus-visible {
  outline: 2px solid #2563eb;  /* только при клавиатурной навигации */
  outline-offset: 2px;
}

/* Outline для отладки вёрстки */
* { outline: 1px solid red; }  /* видно все элементы и их границы */

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

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

Используй border-radius: 50% на квадратном элементе (одинаковые ширина и высота). Для аватаров и иконок это стандартный приём: width: 48px; height: 48px; border-radius: 50%. Если нужна рамка вокруг круглого элемента — добавь border: 2px solid #ccc. Для изображений дополнительно укажи object-fit: cover чтобы картинка заполняла круг без искажений.

border vs outline — в чём разница?

border — часть блочной модели: занимает место, влияет на ширину и высоту элемента, может иметь border-radius. outline — снаружи border, не занимает место в layout (не сдвигает соседей), нельзя применить скругление. Браузеры используют outline для индикации фокуса при клавиатурной навигации. Не убирай outline не заменив его альтернативой — это нарушает доступность.

Как сделать рамку только снизу в CSS?

Используй только border-bottom. Чтобы не было рамок с других сторон, либо задай только border-bottom, либо сначала сбрось все рамки и добавь только нижнюю:

/* Вариант 1: только нижняя рамка */
h2 {
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 12px;
}

/* Вариант 2: сброс + нижняя */
.tab {
  border: none;
  border-bottom: 3px solid transparent;
}

.tab.active {
  border-bottom-color: #2563eb;
}