Свойства границ CSS
Свойства границ CSS позволяют указать тип и цвет границы элемента.
Стиль границы
Свойство border-style указывает, какие типы границ отображать.
Ни одно из свойств границы не будет иметь никакого эффекта, если свойство
border-style не указано!Значения border-style:
none: Определяет отсутствие границы
dotted: Определяет границу точками
dashed: Определяет пунктирную границу
solid: Определяет сплошную границу
double: Определяет двойную границу. Ширина двойной границы такая же, как значение border-width
groove: Определяет 3D рифленые границы. Эффект зависит от значения border-color
ridge: Определяет 3D ребристые границы. Эффект зависит от значения border-color
inset: Определяет 3D вставленную границу. Эффект зависит от значения border-color
outset: Определяет 3D выставленную границу. Эффект зависит от значения border-color
Попробуй сам: Устанавливает стиль границы
Ширина границы
Свойство border-width используется для определения ширины границы.
Ширина устанавливается в пикселях, или с помощью одного из трех предопределенных значений: thin, medium, или thick.
Примечание: Свойство "border-width" не работает если используется одно. Используйте свойство "border-style" первым для установки границы.
Пример 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.one { border-style:solid; border-width:5px; }
p.two { border-style:solid; border-width:medium; }
p.three { border-style:solid; border-width:1px; }
</style>
</head>
<body>
<p class="one">Некоторый текст.</p>
<p class="two">Некоторый текст.</p>
<p class="three">Некоторый текст.</p>
<p><b>Примечание:</b> Свойство "border-width" не работает, если оно указано одно. Используйте свойство "border-style" первым для установки границы.</p>
</body>
</html>
Цвет границы
Свойство border-color используется для определения цвета границы. Цвет может быть установлен с помощью:
- имя - имя цвета, как "red"
- RGB - значение RGB, как "rgb(255,0,0)"
- шестнадцатеричное значение - как "#ff0000"
Вы также можете установить цвет границы в "transparent".
Примечание: Свойство "border-color" не работает если используется одно. Используйте свойство "border-style" первым для установки границы.
Пример 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.one { border-style:solid;border-color:red; }
p.two { border-style:solid; border-color:#98bf21; }
</style>
</head>
<body>
<p class="one">Сплошная красная граница</p>
<p class="two">Сплошная зеленая граница</p>
<p><b>Примечание:</b> Свойство "border-width" не работает, если оно указано одно. Используйте свойство "border-style" первым для установки границы.</p>
</body>
</html>
Граница - отдельные стороны
В CSS можно задать различные границы для различных сторон:
Пример 3
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>2 разных стиля границы.</p>
</body>
</html>
Приведенный выше пример можно также установить с одним свойством:
Пример 4
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { border-style:dotted solid; }
</style>
</head>
<body>
<p>2 разных стиля границы.</p>
</body>
</html>
Свойство border-style может иметь от одного до четырех значений.
- border-style:dotted solid double dashed;
- верхняя граница - dotted
- правая граница - solid
- нижняя граница - double
- левая граница - dashed
- border-style:dotted solid double;
- верхняя граница - dotted
- правая и левая граница - solid
- нижняя граница - double
- border-style:dotted solid;
- верхняя и нижняя граница - dotted
- правая и левая граница - solid
- border-style:dotted;
- все четыре границы - dotted
Свойство border-style используется в примере выше. Тем не менее, оно также работает с border-width и border-color.
Граница - Краткая форма записи
Как вы можете видеть из приведенных выше примеров, есть много свойств, которые необходимо учитывать при определении границ.
Для сокращения кода, можно также указать все свойства границы в одном свойстве. Это называется краткая форма записи.
Краткая форма записи для свойства границы - "border":
Пример 5
При использовании свойств границы, порядок значений следующий:
Это не имеет значения, если одно из значений выше отсутствуют (только, border-style является обязательным), до тех пор, пока все остальные находятся в указанном порядке.
Больше примеров
Пример 6
Этот пример демонстрирует сокращенное свойство для установки всех свойств верхней границы в одной декларации.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { border-style:solid; border-top:thick double #ff0000; }
</style>
</head>
<body>
<p>Это некоторый текст в параграфе.</p>
</body>
</html>
Пример 7
В этом примере показано, как задать стиль нижней границы.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { border-style:solid; }
p.none { border-bottom-style:none; }
p.dotted { border-bottom-style:dotted; }
p.dashed { border-bottom-style:dashed; }
p.solid { border-bottom-style:solid; }
p.double { border-bottom-style:double; }
p.groove { border-bottom-style:groove; }
p.ridge { border-bottom-style:ridge; }
p.inset { border-bottom-style:inset; }
p.outset { border-bottom-style:outset; }
</style>
</head>
<body>
<p class="none">Без нижней границы.</p>
<p class="dotted">Нижняя граница точками.</p>
<p class="dashed">Нижняя пунктирная граница.</p>
<p class="solid">Нижняя сплошная граница.</p>
<p class="double">Нижняя двойная граница..</p>
<p class="groove">Нижняя радиальная граница.</p>
<p class="ridge">Нижняя граница хребет.</p>
<p class="inset">Нижняя вкладная граница.</p>
<p class="outset">Нижняя выставленная граница.</p>
</body>
</html>
Пример 8
В этом примере показано, как задать ширину левой границы.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { border-style:solid; border-left-width:15px; }
</style>
</head>
<body>
<p><b>Примечание:</b> Свойство "border-width" не работает, если оно указано одно. Используйте свойство "border-style" первым для установки границы.</p>
</body>
</html>
Пример 9
В этом примере показано, как задать цвет четырех границ. Она может иметь от одного до четырех цветов.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.one { border-style:solid; border-color:#0000ff; }
p.two { border-style:solid; border-color:#ff0000 #0000ff;}
p.three { border-style:solid; border-color:#ff0000 #00ff00 #0000ff; }
p.four { border-style:solid; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); }
</style>
</head>
<body>
<p class="one">Граница с одним цветом!</p>
<p class="two">Граница с двумя цветами!</p>
<p class="three">Граница с тремя цветами!</p>
<p class="four">Граница с четырмя цветами!</p>
<p><b>Примечание:</b> Свойство "border-width" не работает, если оно указано одно. Используйте свойство "border-style" первым для установки границы.</p>
</body>
</html>
Пример 10
В этом примере показано, как задать цвет правой границы.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { border-style:solid; border-right-color:#ff0000; }
</style>
</head>
<body>
<p>Это некоторый текст в параграфе.</p>
</body>
</html>
Все свойства границ CSS
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| border | Устанавливает все свойства границы в одной декларации | border-width border-style border-color |
1 |
| border-bottom | Устанавливает все свойства нижней границы в одной декларации | border-bottom-width border-bottom-style border-bottom-color |
1 |
| border-bottom-color | Устанавливает цвет нижней границы | border-color | 2 |
| border-bottom-style | Устанавливает стиль нижней границы | border-style | 2 |
| border-bottom-width | Устанавливает ширину нижней границы | border-width | 1 |
| border-color | Устанавливает цвет четырех границ | color_name hex_number rgb_number transparent inherit |
1 |
| border-left | Устанавливает все свойства левой границы в одной декларации | border-left-width border-left-style border-left-color |
1 |
| border-left-color | Устанавливает цвет левой границы | border-color | 2 |
| border-left-style | Устанавливает стиль левой границы | border-style | 2 |
| border-left-width | Устанавливает ширину левой границы | border-width | 1 |
| border-right | Устанавливает все свойства правой границы в одной декларации | border-right-width border-right-style border-right-color |
1 |
| border-right-color | Устанавливает цвет правой границы | border-color | 2 |
| border-right-style | Устанавливает стиль правой границы | border-style | 2 |
| border-right-width | Устанавливает ширину правой границы | border-width | 1 |
| border-style | Устанавливает стиль четырех границ | none hidden dotted dashed solid double groove ridge inset outset inherit |
1 |
| border-top | Устанавливает все свойства верхней границы в одной декларации | border-top-width border-top-style border-top-color |
1 |
| border-top-color | Устанавливает цвет верхней границы | border-color | 2 |
| border-top-style | Устанавливает стиль верхней границы | border-style | 2 |
| border-top-width | Устанавливает ширину верхней границы | border-width | 1 |
| border-width | Устанавливает ширину четырех границ | thin medium thick length inherit |
1 |
Была ли эта информация полезной?
