Стили, ширина и цвет границ
Применяйте границы разных стилей, ширины и цветов с помощью сокращённых и раздельных свойств.
«Стили, ширина и цвет границ» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Сокращённая запись border
Сокращённая запись border задаёт сразу все четыре стороны: ширину, стиль и цвет.
<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>
Значения border-style
Для отображения границы необходимо задать border-style. Доступные значения:
solid— сплошная линияdashed— длинные штрихиdotted— круглые точкиdouble— две параллельные линииgroove/ridge/inset/outset— трёхмерные эффектыnone— без границы (по умолчанию)
border-width
border-width принимает любую единицу длины или ключевые слова thin, medium, thick. Для точного управления используйте числовые значения.
<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>
border-color
border-color принимает любое значение цвета CSS, включая RGBA для прозрачности. currentColor наследует цвет текста.
<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>
Границы отдельных сторон
Задавайте границы определённых сторон с помощью свойств в полной записи:
<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>
border-radius
border-radius скругляет углы элемента. Используйте одно значение для равномерного скругления или до четырёх значений для управления каждым углом отдельно.
<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">●</div>
<div class="custom">Custom</div>
Эллиптический border-radius
Для радиуса каждого угла можно указать два значения, разделённых символом /, чтобы получить асимметричное эллиптическое скругление:
<div class="leaf"></div>
border-image
border-image заменяет границу фрагментированным изображением или градиентом, позволяя создавать декоративные границы:
<div class="fancy">Gradient border image</div>
outline и border
outline рисует линию снаружи границы. В отличие от border, он не влияет на компоновку или размеры элемента. Обычно его используют как индикатор фокуса клавиатуры.
<button class="focus-demo">Focused Button (demo)</button>
Удаление outline: используйте осторожно
Никогда не удаляйте обводку :focus, не предоставив взамен другой видимый индикатор фокуса. Удаление стилей фокуса ухудшает доступность для пользователей клавиатуры и программ чтения с экрана.
<button>Button without outline</button>
<a href="#">Link without outline</a>
border-collapse для таблиц
Для HTML-таблиц значение border-collapse: collapse объединяет соседние границы ячеек в одну линию, делая таблицу аккуратнее.
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>30</td></tr>
</table>
Быстрая проверка
Какое свойство CSS рисует линию снаружи границы, не влияя на компоновку элемента?
Итоги
Сокращённая запись border задаёт ширину, стиль и цвет. border-radius скругляет углы. outline отделён от границы: он не влияет на компоновку и необходим для индикаторов фокуса, обеспечивающих доступность при работе с клавиатурой.
Часто задаваемые вопросы
Урок «Стили, ширина и цвет границ» бесплатный?
Да — полный текст урока «Стили, ширина и цвет границ» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Стили, ширина и цвет границ»?
Применяйте границы разных стилей, ширины и цветов с помощью сокращённых и раздельных свойств. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Стили, ширина и цвет границ»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Понимание ширины, высоты, внешних и внутренних отступов
- Стили, ширина и цвет границ
- Размер блока: Content-Box и Border-Box
- Контур и тень блока