Задавать каждую сторону отступа отдельным свойством долго и громоздко. В CSS есть краткая запись, которая позволяет описать все четыре стороны одной строкой — это экономит время и делает код чище. А скругление углов (border-radius) — маленькая деталь, которая мгновенно превращает «строгие коробки» в современные мягкие карточки и кнопки, как на всех актуальных сайтах.

После этого урока вы сможете записывать отступы кратко и по сторонам, а также скруглять углы блоков, картинок и кнопок.

Что уже умеем / что добавим

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

Что вы узнаете в рамках статьи

• Как задавать отступы одной короткой записью.
• Как понимать запись из одного, двух и четырёх значений.
• Как задавать отдельные стороны при необходимости.
• Как скруглять углы свойством border-radius.
• Как сделать идеально круглый элемент.

Ключевые термины

• Короткая запись (shorthand) — одно свойство, задающее сразу несколько значений.
• border-radius — свойство скругления углов элемента.
• Стороны отступа — верх, право, низ, лево (по часовой стрелке).
• Скругление — сглаживание прямых углов блока.

Короткая запись отступов

Свойства padding и margin принимают от одного до четырёх значений. От их количества зависит, к каким сторонам они применятся.

Одно значение — ко всем четырём сторонам сразу:

.card {
  padding: 20px;
}

Два значения — вертикаль и горизонталь:

.card {
  padding: 20px 40px; /* 20px сверху и снизу, 40px слева и справа */
}

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

Четыре значения и отдельные стороны

Если стороны разные, указывают все четыре значения — по часовой стрелке, начиная сверху: верх, право, низ, лево.

.card {
  padding: 10px 20px 30px 40px;
  /* верх 10, право 20, низ 30, лево 40 */
}

Запомнить порядок помогает движение по кругу: сверху → вправо → вниз → влево. Если же нужно изменить только одну сторону, удобнее отдельное свойство:

.features {
  margin-top: 40px;
}

Отдельные свойства (padding-left, margin-bottom и т. д.) хороши для точечных правок, а короткая запись — когда задаёте отступы блоку целиком.

Скругление углов

Свойство border-radius сглаживает прямые углы элемента. Чем больше значение, тем сильнее скругление:

.card {
  border-radius: 12px;
}

.button {
  border-radius: 8px;
}

Углы карточки и кнопки станут мягко закруглёнными. border-radius работает с любым элементом, у которого есть форма: блоками, кнопками, изображениями. Скругление не требует рамки — оно сглаживает и фон, и рамку, если она есть.

Идеальный круг

Если задать border-radius равным половине размера квадратного элемента (или просто 50%), он превратится в круг. Это классический приём для круглых аватарок:

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

Квадратное изображение 80×80 станет круглым. Значение 50% означает «половина от размера элемента», поэтому приём работает при любых размерах, пока элемент квадратный. Так делают круглые фото профилей на большинстве сайтов.

Применяем в проекте

Добавим лендингу современный вид — скруглим кнопку, карточки-преимущества и главное изображение. Заодно применим короткую запись отступов.

.button {
  padding: 12px 24px;
  border-radius: 8px;
  background-color: #1a3c8c;
  color: white;
}

.features {
  padding: 40px 20px;
  border-radius: 12px;
}

.hero img {
  border-radius: 12px;
}

Обновите страницу: кнопка стала аккуратной «пилюлей» с мягкими углами и удобными полями, блок преимуществ — карточкой со скруглёнными краями, а изображение потеряло резкие углы. Такие детали и создают ощущение современного, тщательно сделанного сайта.

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

• Неверный порядок четырёх значений.
  Помните движение по часовой стрелке: верх, право, низ, лево.
• Скругление без видимого эффекта.
  Если у элемента нет фона, рамки или это строчный текст, скругление можно не заметить.
• Круг из неквадратного элемента.
  border-radius: 50% даёт круг только у квадрата; у прямоугольника получится овал.
• Слишком большое скругление.
  Огромный радиус может «съесть» углы содержимого — подбирайте умеренные значения.

Итоги

Здорово — теперь ваш код и лаконичнее, и красивее! Вы освоили короткую запись отступов от одного до четырёх значений, научились задавать отдельные стороны и скруглять углы — вплоть до идеального круга. Эти приёмы вы будете применять постоянно. А ваш лендинг с мягкими скруглёнными кнопкой, карточкой и картинкой смотрится по-настоящему современно.

Прекрасная работа! Остался последний штрих раздела: в следующем уроке разберём единицы измерения — пиксели, проценты и адаптивные em и rem.