Урок 8. Рамки, скругления и тени

Рамка

Свойство border. В нём сразу три значения через пробел: толщина, вид, цвет.

p {
  border: 2px solid #23e0ff;
}

Вид рамки бывает solid (сплошная), dashed (пунктир) и dotted (точки).

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

border-radius — насколько скруглить углы:

img {
  border-radius: 16px;
}

Хитрость: если поставить border-radius: 50% квадратной картинке, она станет кругом. Так делают все круглые аватарки в интернете.

Тень

box-shadow — тень под элементом. Четыре числа и цвет:

p {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

• первое число — сдвиг вправо;
• второе — сдвиг вниз;
• третье — размытие (чем больше, тем мягче);
• цвет обычно пишут через rgba, где последнее число — прозрачность от 0 до 1.

Частые вопросы