Свойство border-width

Задает толщину границы элемента

border-width: 2px;
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

border-width: 5px;

Толщина границы со всех сторон. Возможные единицы: px, em, rem, vh, vw, а так же ключевые слова: thin, medium, thick

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

Толщина границы используя два параметра. Первый - ширина границы сверху и снизу, второй - ширина границы слева и справа

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

Ширина границы используя три параметра. Первый - ширина границы сверху, второй - ширина границы слева и справа, третий - ширина границы снизу

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

Ширина границы используя четыре параметра. Первый - ширина границы сверху, второй - ширина границы справа, третий - ширина границы снизу, четвертый - ширина границы слева

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

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

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

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