CSS border-style — стиль рамки: solid, dashed, dotted

Властивість border-style дозволяє встановити стиль межі для всіх сторін елементу.

Ви можете використати від одного до чотирьох значень. Кожне значення визначає стиль для кожної зі сторін елементу.

Наприклад, якщо задано всі чотири значення вони задаватимуть стилі для верхньої, правої, нижньої та лівої сторін(саме в такому порядку). Три значення задають стилі для верхньої, лівої та правої, нижньої сторін(саме в такому порядку).

Початкове значення для border-style дорівнює none, тобто межа не показується. У випадку відсутності значення для цієї властивості, елемент не матиме межі, навіть якщо будуть прописані border-color та border-width.

Для border-style має бути задане одне, два, три або чотири значення:

  • одне значення застосовуються для всіх чотирьох сторін;
  • два значення застосовують перше до верхньої та нижньої сторін, друге - лівої та правої;
  • три значення застосовують перше до верхньої сторони, друге - лівої та правої, третє - нижньої;
  • чотири значення застосовуються для верхньої, правої, нижньої та лівої сторін, у порядку за годинниковою стрілкою.

Приклади:

  • border-style:dotted solid double dashed;
    • веpxня границя складається з точок
    • права границя є заповненою
    • нижня границя подвоєною
    • ліва границя пунктирна
  • border-style:dotted solid double;
    • веpxня границя складається з точок
    • права і ліва границі є заповненими
    • нижня границя подвоєна
  • border-style:dotted solid;
    • веpxня і нижня границі складаються з точок
    • права і ліва границі є заповненими
  • border-style:dotted;
    • всі чотири границі складаються з точок
Види стилів рамок.
dotted
dashed
solid
double
groove
ridge
inset
outset
автор: Svitlana

Загальний опис

автор: NagarD

Нотатка

Значення hidden не підтримуєтья в IE7 та більш ранніх версіях, а IE8 вимагає !DOCTYPE, IE9 підтримує значення hidden.

автор: Svitlana

Синтаксис

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Властивість border-style може отримувати 12 значень:

none

Кордон не відображається. Без задання.

автор: Svitlana

hidden

Майже те саме що й none, за винятком вирішення конфліктів кордонів для елементів таблиці.

автор: Svitlana

dotted

Кордон з точок.

автор: Svitlana

dashed

Пунктирний кордон.

автор: Svitlana

solid

Суцільний кордон.

автор: Svitlana

double

Подвійний кордон.

автор: Svitlana

groove

Рифлений 3D кордон. Ефект залежить від значення border-color.

автор: Svitlana

ridge

Ребристий 3D кордон. Ефект залежить від значення border-color

автор: Svitlana

inset

Урізаний (звеpxу-справа) 3D кордон. Ефект залежить від значення border-color.

автор: Svitlana

outset

Урізаний (знизу-зліва) 3D кордон.Ефект залежить від значення border-color.

автор: Svitlana

initial

Встановлює властивість у значення без задання

автор: Svitlana

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

Значення без задання: none
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.borderStyle="dotted double"

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 3.5 12 4
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 1

Приклади

+ запропонувати свій приклад у пісочниці

Від одного до чотирьох значень: чотири — верх/право/низ/ліво, три — верх/боки/низ, два — верх-низ/боки, одне — всі сторони.

HTML

<p class="one">чотири значення: dotted solid dashed double</p>
<p class="two">три значення: dotted solid dashed</p>
<p class="three">два значення: dotted solid</p>
<p class="four">одне значення: dotted</p>

CSS

p { padding: 8px; }

p.one {
    border-style: dotted solid dashed double;
}

p.two {
    border-style: dotted solid dashed;
}

p.three {
    border-style: dotted solid;
}

p.four {
    border-style: dotted;
}
автор: Svitlana

Без border-style рамки немає навіть із заданими шириною й кольором; сам border-style малює рамку типовою шириною й кольором тексту.

HTML

<div class="a">border-width і border-color задані, border-style — ні. Рамки немає.</div>
<div class="b">Ті самі ширина й колір плюс border-style: solid.</div>
<div class="c">Лише border-style: solid — ширина medium, колір узятий із color.</div>
<div class="d">border: 2px double — двом лініям нема де поміститися, виглядає як solid.</div>
<div class="e">border: 4px double — тепер видно обидві лінії.</div>

CSS

div {
    margin-bottom: 12px;
    padding: 8px;
    font-family: sans-serif;
}

.a {
    border-width: 4px;
    border-color: #c0392b;
}

.b {
    border-width: 4px;
    border-color: #c0392b;
    border-style: solid;
}

.c {
    color: #0172ad;
    border-style: solid;
}

.d {
    border: 2px double #c0392b;
}

.e {
    border: 4px double #c0392b;
}
автор: NagarD

Динамічний приклад

HTML

<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-style</strong>.</p>

<p>Вона встановлює стиль кордону для елемента на сторінці.</p>

<strong>border-style: </strong>
<select class="input" id="select">
  <option value="solid" name="value2" selected>solid</option>
  <option value="dashed" name="value2">dashed</option>
  <option value="dotted" name="value2">dotted</option>
  <option value="double" name="value2">double</option>
  <option value="groove" name="value2">groove</option>
  <option value="ridge" name="value2">ridge</option>
  <option value="inset" name="value2">inset</option>
  <option value="outset" name="value2">outset</option>
  <option value="none" name="value2">none</option>
</select> 
<strong>;</strong>
  
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
  padding: 16px;
}

.box {
  background-color: #f7f7f7;
  padding: 16px;
  border: 8px solid #F74C32;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#select {
  position: relative;
  width: 100px;
}

JS

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var sel = document.querySelector('#select').selectedOptions[0].textContent;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-style', sel));
}));
автор: Svitlana

Демонстрація роботи властивості

HTML

<div class="info">
	<p>За допомогою властивості <code>border-style</code> ми можемо встановити стиль для кордону елемента.</p>
</div>

<div class="wrapper">
    <div class="block"></div>
    <div class="block dashed">border-style: dashed;</div>
    <div class="block dotted">border-style: dotted;</div>
    <div class="block double">border-style: double;</div>
    <div class="block groove">border-style: groove;</div>
    <div class="block ridge">border-style: ridge;</div>
    <div class="block inset">border-style: inset;</div>
    <div class="block outset">border-style: outset;</div>  
    <div class="block none">border-style: none;</div>
</div>

CSS

* {
    box-sizing: border-box;
}

body {
    font-family: monospace;
    font-size: 17px;
    line-height: 1.45;
    text-align: center;
}

.info {
    padding: 4px 16px 8px 16px;
}

code {
    font-weight: 700;
    color: #444;
    border-bottom: 2px solid #666;
}

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.block {
    width: 150px;
    height: 150px;
    background-color: gold;
    border: 10px solid #444;
    margin-bottom: 20px;
    margin-right:20px;
    padding-top: 20px;
}

.block.dashed {
    border-style: dashed;
}

.block.dotted {
    border-style: dotted;
}

.block.double {
    border-style: double;
}

.block.groove {
    border-style: groove;
}

.block.ridge {
    border-style: ridge;
}

.block.inset {
    border-style: inset;
}

.block.outset {
    border-style: outset;
}

.block.none {
    border-style: none;
}
автор: Svitlana

Демонстрація роботи властивості

HTML

<div class="block block-1">
  <code>none</code>
</div>
<div class="block block-2">
  <code>hidden</code>
</div>
<div class="block block-3">
  <code>dotted</code>
</div>
<div class="block block-4">
  <code>dashed</code>
</div>
<div class="block block-5">
  <code>solid</code>
</div>
<div class="block block-6">
  <code>double</code>
</div>
<div class="block block-7">
  <code>groove</code>
</div>
<div class="block block-8">
  <code>ridge</code>
</div>
<div class="block block-9">
  <code>inset</code>
</div>
<div class="block block-10">
  <code>outset</code>
</div>
<div class="block block-11">
  <code>solid double</code>
</div>
<div class="block block-12">
  <code>dotted solid double</code>
</div>
<div class="block block-13">
  <code>groove ridge inset dashed</code>
</div>

CSS

.block {
  width: 450px;
  height: 150px;
  background-color: #ccc;
  border-width: 8px;
  border-color: #666;
  margin-bottom: 16px;
  line-height: 146px;
  box-sizing: border-box;
  text-align: center;
  font-family: monospace;
  color: #222;
  font-size: 13px;
}

.block-1 {
  border-style: none;
}
.block-2 {
  border-style: hidden;
}
.block-3 {
  border-style: dotted;
}
.block-4 {
  border-style: dashed;
}
.block-5 {
  border-style: solid;
}
.block-6 {
  border-style: double;
}
.block-7 {
  border-style: groove;
}
.block-8 {
  border-style: ridge;
}
.block-9 {
  border-style: inset;
}
.block-10 {
  border-style: outset;
}
.block-11 {
  border-style: solid double;
}
.block-12 {
  border-style: dotted solid double;
}
.block-13 {
  border-style: groove ridge inset dashed;
}
автор: Svitlana

Приклад використання властивості

HTML

<div class="block">
	<code>border-style: double;</code>
</div>

CSS

.block {
	width: 350px;
	height: 250px;
	text-align: center;
	box-sizing: border-box;
  margin-top: 50px;
  font-size: 19px;
}
code{
  border: 12px double #666;
  padding: 30px;
}
автор: Svitlana

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід