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

Изучайте простой и понятный способ добавления рамки к блоку с помощью CSS. Узнайте как задать ширину, стиль, цвет и другие параметры рамки, а также примеры кода для использования.

Создание рамки с помощью CSS

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

border-style: solid;
border-width: 2px;
border-color: #333;

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

border-top: 2px solid #fff;
border-right: 1px transparent;
border-bottom: 2px solid #fff;
border-left: 1px transparent;

Также можно задать одинаковые стили для всех краев рамки, используя сокращенную запись:

border: 2px solid #fff;

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

border-radius: 10px;

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

border: 2px solid #fff; 
border-radius: 10px;