Как сделать рамку в html

Узнайте, как создать предельно простую рамку в HTML используя тег

и стилевое оформление. Подробное объяснение и примеры дают понятное представление о работе с рамками.

Рамки в HTML

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

.element {
  border: 1px solid blue;
}

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

.element {
  border-top: 2px solid blue;
  border-right: 1px solid red;
  border-bottom: 3px solid green;
  border-left: 1px solid red;
}

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

.element {
  border-radius: 5px;
}

Также можно задать разное округление для каждого из восьми углов. Например, чтобы задать округление правого верхнего угла в 10 пикселей, правого нижнего угла в 20 пикселей, левого верхнего угла в 5 пикселей и левого нижнего угла в 15 пикселей, используйте такой код:

.element {
  border-radius: 10px 20px 5px 15px;
}

Таким образом, с помощью свойства border и border-radius можно легко задать рамку для HTML элемента любого цвета и формы.