Как сделать обводку блока в css

В статье описывается, как используя свойство CSS "border", добавить обводку к блоку и настроить ее с помощью различных стилей, цветов и толщины. Приведен пример кода с пояснениями.

Обводка блока в CSS

Для того, чтобы сделать обводку блока в CSS, нам понадобится использовать псевдоэлемент border. Для начала мы должны определить ширину, цвет и стиль обводки. Например, для того, чтобы добавить к блоку чёрную обводку толщиной в 1 пиксель и плоским стилем, мы пишем такой код:

.block {
  border: 1px solid #000000;
}

Если мы хотим добавить обводку с другими стилями, такими как пунктирная линия или дуга, мы можем использовать ключевое слово dashed или dotted для стиля. Например, для того, чтобы добавить к блоку красную обводку толщиной в 2 пикселя с пунктирным стилем, мы пишем такой код:

.block {
  border: 2px dotted #FF0000;
}

Также мы можем задать разные значения для верхней, нижней, левой и правой границ блока с помощью свойств border-top, border-bottom, border-left и border-right. Например, для того, чтобы добавить к блоку зелёную обводку толщиной в 1 пиксель с плоским стилем для верхней и нижней границ, и красную обводку толщиной в 2 пикселя с пунктирным стилем для левой и правой границ, мы пишем такой код:

.block {
  border-top: 1px solid #00FF00;
  border-bottom: 1px solid #00FF00;
  border-left: 2px dotted #FF0000;
  border-right: 2px dotted #FF0000;
}

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

.block {
  border-radius: 5px;
}

Вот и всё. Теперь вы знаете, как добавить обводку блока в CSS.