Как сделать рамку вокруг блока и скруглить её углы? border и border-radius

Задан 2 месяца назад230 просмотров2 ответа

Хочу обвести блок рамкой, как карточку, и чтобы углы были закруглённые, а не острые. Какими свойствами это делается?

Яна Борисова 🐣 Птенец

спросил 2 месяца назад

2 ответа

✓ Принятый ответ — помог автору

Рамка — border, скругление углов — border-radius:

.card {
  border: 2px solid #333;   /* толщина, стиль, цвет */
  border-radius: 12px;       /* радиус скругления углов */
  padding: 16px;
}

У border три части подряд:

толщина (2px),
стиль (solid — сплошная, dashed — пунктир, dotted — точки),
цвет (#333).

Чем больше border-radius, тем круглее углы. А border-radius: 50%; на квадрате превратит его в круг — так часто делают круглые аватарки.

Оксана Соколова 🥚 Яйцо

2 месяца назад

Если рамка не нужна, а скругление хочется (например, у картинки или кнопки с фоном) — border-radius работает и без border, сам по себе. Рамка и скругление независимы.

Сергей Волков 🐣 Птенец

2 месяца назад

Ваш ответ

Войдите, чтобы ответить на вопрос.