Свойство 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>