Загрузка...

Границы (border) в CSS

Вы уже умеете заливки, фото, градиенты и мягкое затухание. Следующий навык: нарисовать край коробки. Граница (border) — линия, которая обрамляет элемент: карточки, кнопки, поля и панели на неё опираются.

Что такое граница?

Граница CSS лежит на краю бокса элемента. У неё три части: ширина (толщина), стиль (вид — сплошная, пунктир и т.д.) и цвет. Без стиля часто нет полезной линии, даже если задана ширина.

Три части

Думайте о каждой границе как о коротком рецепте: толщина + вид + краска.

Длинная запись: ширина, стиль, цвет

css
CSS Code 
.card {
border-width: 2px;
border-style: solid;
border-color: #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

Почему важен стиль

Одного border-width мало. Без border-style, отличного от начального none, линии обычно не видно. Начните с solid, потом пробуйте другие виды.

Сокращение: одна строка вместо трёх

Сокращение border собирает ширину, стиль и цвет. Обычный бытовой порядок: ширина → стиль → цвет.

Сокращение border

css
CSS Code 
.panel {
border: 2px solid #0f766e;
padding: 1rem;
background-color: #ecfeff;
}

Частые стили границы

Стиль — характер линии. Сначала запомните небольшой повседневный набор.

📊 Частые значения border-style

Ключевое слово Вид Повседневное использование
solid Сплошная линия Карточки, кнопки, поля форм
dashed Короткие штрихи Подсказки, зоны сброса
dotted Точки Мягкие разделители, лёгкие рамки
double Две параллельные линии Декоративный акцент (редко)
none Граница не рисуется Сброс / убрать край
hidden Как none при схлопывании границ таблицы Таблицы позже — запомните имя

Несколько стилей рядом

Та же ширина и цвет; меняется только стиль.

solid, dashed, dotted, double

css
CSS Code 
.box-solid { border: 3px solid #134e4a; }
.box-dashed { border: 3px dashed #134e4a; }
.box-dotted { border: 3px dotted #134e4a; }
.box-double { border: 3px double #134e4a; }

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

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

Границы по сторонам

css
CSS Code 
.quote {
border-top: none;
border-right: none;
border-bottom: none;
border-left: 4px solid #0f766e;
padding: 0.75rem 1rem;
background-color: #f8fafc;
}

Сокращение для одной стороны

border-left: 4px solid #0f766e — повседневный способ задать один край, не трогая остальные.

Привычка простой карточки

Тонкая граница плюс внутренний отступ и мягкая заливка читается как ясная карточка без крика.

Простая карточка с границей

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 0; /* скругление — следующий урок; здесь углы прямые */
padding: 1rem;
background-color: #ffffff;
color: #0f172a;
}

Убрать границу

Для очистки предпочитайте border: none (или border-style: none). Один border-color: transparent иногда оставляет толщину — none чистый сброс.

Сброс через border none

css
CSS Code 
.plain {
border: none;
}

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

  1. Карточка с border-width, border-style: solid и бирюзовым border-color.
  2. Тот же вид через border: 2px solid #0f766e.
  3. Четыре блока: solid, dashed, dotted и double одной толщины.
  4. Цитата только с толстой левой границей.
  5. Начните с кнопки с границей, затем уберите край через border: none.

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

  • Задать ширину и цвет, забыв border-style (ничего не видно)
  • Путать border (нарисованный край) и margin (внешний зазор) — разные инструменты
  • Ждать скругления только от border — это border-radius (следующий урок)
  • Красить каждую сторону кислотно «просто так»
  • Оставлять толстую прозрачную границу, когда нужен border: none

Кратко

  • Границе нужны ширина, стиль и цвет
  • border: 2px solid #0f766e — повседневное сокращение
  • Сначала выучите solid, dashed, dotted, double и none
  • Стилизуйте стороны отдельно, когда просит дизайн
  • Чистый сброс — border: none
  • Пока углы прямые — скругление дальше

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
9
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок