CSS Границы

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

Основной синтаксис

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

p {
  border: 2px solid black;
}

В этом примере все <p> элементы получат черную сплошную границу толщиной 2px.

Стили границ

CSS поддерживает различные стили границ:

solid — сплошная линия
dashed — пунктирная линия
dotted — точечная линия
double — двойная линия
groove, ridge, inset, outset — объёмные стили
none — без границы

Границы для каждой стороны

Можно управлять каждой стороной отдельно:

div {
  border-top: 3px solid red;
  border-right: 3px dashed blue;
  border-bottom: 3px dotted green;
  border-left: 3px double black;
}

Закругленные углы

Для создания закругленных углов используется border-radius:

img {
  border: 5px solid gray;
  border-radius: 10px;
}

Чем больше значение, тем более закруглен угол (при 50% можно получить идеальный круг).

Краткое резюме

Границы помогают визуально отделять элементы.
Можно задавать толщину, цвет и стиль.
Каждую сторону можно настроить отдельно.
С border-radius можно сделать круглые рамки.

{ Web Commander }