Тег border-right-style CSS: опис, синтаксис і приклад
Тег border-right-style в CSS встановлює стиль правої межі елемента.
Синтаксис
border-right-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit
Значення
- none
- Лінія не відображається та її товщина обнуляється.
- hidden
- Має той же ефект, що і none, окрім випадку застосування до комірок таблиці зі значенням border-collapse: collapse. У цьому випадку права межа в комірці не буде відображатися взагалі.
- dotted
- Лінія складається з набору крапок.
- dashed
- Пунктирна лінія, що складається з серії коротких відрізків.
- solid
- Суцільна лінія.
- double
- Подвійна лінія.
- groove
- Створює ефект вдавленої лінії.
- ridge
- Створює ефект рельєфної лінії.
- inset
- Псевдо-тривимірна лінія.
- outset
- Псевдо-тривимірна лінія.
- inherit
- Наслідує значення батька.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-right-style</title>
<style>
.line {
border-right-color: #ef40b0; /* Колір лінії справа */
border-right-style: dotted; /* Стиль лінії */
border-right-width: 3px; /* Товщина лінії */
border-left-color: #ef40b0; /* Колір лінії зліва */
border-left-style: dotted; /* Стиль лінії */
border-left-width: 3px; /* Товщина лінії */
padding: 0 10px; /* Відстань між лінією та текстом */
margin: 0 50px; /* Відступи справа та зліва */
}
</style>
</head>
<body>
<div class="line"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam
erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci
tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
</div>
</body>
</html>Браузери
Internet Explorer до версії 7.0 включно не підтримує значення hidden та inherit.
Стиль межі в різних браузерах може трохи відрізнятися при використанні значень groove, ridge, inset або outset.