CSS — Примеры стилей границ (размер, цвет, эффект)

Сегодня мы рассказываем о свойствах границ CSS. Свойства границы CSS позволяют работать со стилем, размером и цветом границы. Мы собираемся поделиться некоторыми образцами и сделать красивый сайт, используя свойства границы.

Образец 01. Размер границы

.коробка {
граница: 7px solid # ff3000;
}

Образец 02. Пунктир — стиль границы

.коробка {
граница: 2px пунктирная # ff3000;
}

Образец 03. Пунктир — Стиль границы

.коробка {
граница: 2px пунктирная # ff3000;
}

Образец 04. Двойной стиль

.коробка {
граница: 7px double # ff3000;
}

Образец 05. Контурная граница

.коробка {
граница: 7px solid # ff3000;
контур: 7px solid # ff8000;
}

Образец 06. Конкретный размер границы

.коробка {
граница: 1px solid # ff3000;
Граница внизу: 12px solid # ff3000;
}

Образец 07. Конкретный цвет границы

.коробка {
border-right: 5px solid # ff3000;
Граница слева: 5px solid # ff7000;
border-top: 5px solid # ff5000;
border-top: 5px solid # ff9000;
}

Образец 08. Стиль левой границы

.коробка {
Граница слева: 10px solid # ff3000;
}