Свойство border

Задает границу со всех сторон. Сокращенная запись, которая включает в себя свойства border-width, border-style, border-color

border: 2px solid #ccc;
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

border: none; или border: 0;

Убирает границу у элемента

border: 2px solid #ccc;

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

Возможные единицы: px, em, rem, vh, vw, а так же ключевые слова: thinmediumthick

Тип границы: solid, dashed, dotted, double, groove

Для определения цвета можно использовать ключевые слова названия цвета, шестнадцатеричные значения: #ccc, RGB: rgb(0, 0, 0), RGBa: rgba(0, 0, 0, 0.9) и currentColor.

<style>
.example-1 {
    width: 150px;
    height: 150px;
    background-color: #eee;
    border: 2px solid #ccc;
}
</style>
<div class="example-1"></div>
border: 2px solid;

Создание границы для элемента без указания третьего параметра - цвета. Если параметр цвета не указан, то цвет границы будет таким же как цвет текста элемента

<style>
.example-2 {
    width: 150px;
    height: 150px;
    background-color: #eee;
    border: 2px solid;
}
</style>
<div class="example-2"></div>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии