Стиль границ
CSS свойство border-style позволяет установить стиль для границ HTML элемента.
Значения для установки стилей границ:
- solid границы будут нарисованы сплошной линией;
- dashed границы будут нарисованы пунктирной линией;
- dotted границы будут нарисованы точками;
- double границы будут нарисованы двойной сплошной линией.
.bor1 < border-style:solid; >.bor2 < border-style:dashed; >.bor3
Быстрый просмотр
Обратите внимание: по умолчанию граница элементов всегда невидима (значение none).
Цвет границы
С помощью CSS свойства border-color Вы можете задать цвет границы HTML элемента.
Цвет может быть задан следующими способами:
- С помощью имени (например ‘red’ задаст красный цвет);
- С помощью RGB значения (например ‘rgb(255,255,255)’ задаст белый цвет);
- С помощью шестнадцатеричного значения (например ‘#00ff00’ задаст зеленый цвет).
.bor1 < border-style:solid; border-color:red; >.bor2 < border-style:solid; border-color:green; >.bor3
Быстрый просмотр
Толщина границы
С помощью CSS свойства border-width Вы можете задать толщину границы HTML элемента.
Толщина может быть указана либо в пикселях, либо с помощью предопределенных значений: thin, medium, thick (тонкая, средняя, толстая).
.bor1 < border-style:solid; border-width:4px; >.bor2 < border-style:solid; border-width:2px; >.bor3
Быстрый просмотр
Задание стилей для отдельных сторон
Рассмотренные ранее свойства могут также применяться к отдельным сторонам границы. Их названия перечислены на рисунке ниже:
.bor1 < border-top-style:solid; border-width:2px; >.bor2 < border-bottom-style:solid; border-width:2px; >.bor3
Быстрый просмотр
Существует способ быстрого задания стилей границ. Например в результате применения border-style:dashed double solid groove; К верхней границе будет применено dashed, к правой double, к нижней solid, а к левой groove.
Если Вы укажете только два значения, например border-style:dashed double, то верхняя и нижняя граница будут оформлены как dashed, а левая и правая граница будут оформлены как double.
Стенографическое задание свойств
Для того чтобы сократить длину кода, в CSS предусмотрен стенографический способ записи.
Стенографическая форма записи объединяет все свойства оформления границ в одном свойстве border.
/* Вокруг элемента с классом bor1 будет отображена сплошная граница зеленого цвета, толщиной 2 пикселя */ .bor1
Быстрый просмотр
Порядок следования свойств в стенографической форме записи:
- border-width
- border-style
- border-color
Обратите внимание: Вы можете пропускать неиспользуемые свойства.
/* Вокруг элемента с классом bor1 будет отображена сплошная граница толщиной 1 пиксель */ .bor1
Быстрый просмотр
Внешняя граница
Помимо обычной границы элементы могут иметь еще и внешнюю границу, которая задается с помощью CSS свойства outline.
.out1 < outline-style:dashed; /* определяет стиль внешней границы */ outline-color:green; /* определяет цвет внешней границы */ outline-width:4px; /* определяет ширину внешней границы */ border-style:solid; >
Быстрый просмотр
Сделайте сами
Задание 1 исправьте ошибки оформления (после исправления всех ошибок элементы должны стать оформленными согласно их описанию).
Моя граница нарисована пунктирной линией.
Моя граница нарисована сплошной линией красного цвета.
Моя граница сверху и снизу нарисована сплошной линией, а слева и справа пунктирной. Границы со всех сторон нарисованы голубым цветом.
Моя граница нарисована сплошной линией, толщиной 1 пиксель.
Моя граница слева и справа нарисована сплошной линией розового цвета.
Задание 2 оформите элементы согласно их описанию.
1. Я имею сплошную границу коричневого цвета. 2. Я имею сплошную границу красного цвета слева и справа. 3. Я имею сплошную границу розового цвета сверху, и пунктирную границу голубого цвета слева, справа и снизу. 4. Я имею границу оранжевого цвета толщиной 1 пиксель. 5. Я имею границу красного цвета толщиной 2 пикселя сверху и снизу и пунктирную границу серого цвета слева и справа. 6. Я имею сплошную границу #1435AD цвета и толщиной 1 пиксель. 7. Я имею пунктирную границу #FF8100 цвета и толщиной 1 пиксель сверху и сплошную границу цвета #0B6124 и толщиной 2 пикселя снизу.
Wisdomweb.ru © 2023.
Все права защищены. Любое использование материалов данного сайта без разрешения администрации запрещено.
Онлайн учебники по HTML, HTML5, CSS, JavaScript, AJAX, HDOM, jQuery.
Атрибут border
Для изменения толщины и цвета рамки таблицы используйте стилевое свойство border.
| . |
Браузеры
| 3 | 12 | 1 | 3.5 | 1 | 1 |
| 4.4 | 4 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Свойство border
Создание границы для элемента. Порядок значений не важен. Можно использовать один, два или три параметра. Не указанные параметры будут вести себя как установлено браузером по умолчанию.
Возможные единицы: px, em, rem, vh, vw, а так же ключевые слова: thin, medium, thick
Для определения цвета можно использовать ключевые слова названия цвета, шестнадцатеричные значения: #ccc, RGB: rgb(0, 0, 0), RGBa: rgba(0, 0, 0, 0.9) и currentColor.
.example-1 border: 2px solid;
Создание границы для элемента без указания третьего параметра — цвета. Если параметр цвета не указан, то цвет границы будет таким же как цвет текста элемента
border-style¶
Свойство border-style устанавливает стиль границы вокруг элемента.
Допустимо задавать индивидуальные стили для разных сторон элемента.
Демо¶
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-shadow
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
/* Keyword values */ border-top-style: none; border-top-style: hidden; border-top-style: dotted; border-top-style: dashed; border-top-style: solid; border-top-style: double; border-top-style: groove; border-top-style: ridge; border-top-style: inset; border-top-style: outset; /* vertical | horizontal */ border-style: dotted solid; /* top | horizontal | bottom */ border-style: hidden double dashed; /* top | right | bottom | left */ border-style: none solid dotted dashed; /* Global values */ border-style: inherit; border-style: initial; border-style: unset; Значения¶
Для управления видом границы предоставляется несколько значений свойства border-style . Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселей.
Кроме перечисленных в таблице значений используются следующие ключевые слова.
Не отображает границу и её толщина border-width задаётся нулевой.
Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае вокруг ячейки граница не будет отображаться вообще.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.
| Число значений | Результат |
|---|---|
| 1 | Стиль границы будет задан для всех сторон элемента. |
| 2 | Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой. |
| 3 | Первое значение задаёт стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы. |
| 4 | Поочередно устанавливается стиль верхней, правой, нижней и левой границы. |
border-top-style: none; Применяется ко всем элементам
Спецификации¶
- CSS Backgrounds and Borders Module Level 3
- CSS Level 2 (Revision 1)
- CSS Level 1
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
html> head> meta charset="utf-8" /> title>border-styletitle> style> p border-style: double; /* Стиль линии вокруг абзаца */ padding: 5px; /* Поля вокруг текста */ > style> head> body> p> Развивая эту тему, крещендирующее хождение просветляет миксолидийский райдер. p> body> html>