Свойство border-style

Задает стиль границы элемента

border-style: solid;
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

border-style: none;

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

border-style: solid;

Задает сплошной стиль границы. Возможные значения: solid, dashed, dotted, double, groove

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

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

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

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

<style>
.example-3 {
    width: 150px;
    height: 150px;
    background-color: #424242;
    border: 5px red;
    border-style: solid dashed dotted;
}
</style>
<div class="example-3"></div>
border-style: solid dashed solid dotted;

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

<style>
.example-4 {
    width: 150px;
    height: 150px;
    background-color: #424242;
    border: 5px red;
    border-style: solid dashed double dotted;
}
</style>
<div class="example-4"></div>

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

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

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