border-style
Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
Синтаксис
border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit
Значения
Для управления видом границы предоставляется несколько значений свойства border-style . Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.
Кроме перечисленных в таблице значений используются следующие ключевые слова.
none Не отображает границу и ее толщина ( border-width ) задается нулевой. hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае вокруг ячейки граница не будет отображаться вообще. inherit Наследует значение родителя.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.
| Число значений | Результат |
|---|---|
| 1 | Стиль границы будет задан для всех сторон элемента. |
| 2 | Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой. |
| 3 | Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы. |
| 4 | Поочередно устанавливается стиль верхней, правой, нижней и левой границы. |
HTML5 CSS2.1 IE Cr Op Sa Fx
border-style Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства border-style
Объектная модель
[window.]document.getElementById(» elementID «).style.borderStyle
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .
Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .
Свойство border-style
Свойство border-style задает стиль границы для всех сторон одновременно или отдельно для каждой стороны. Является свойством-сокращением для следующих свойств: border-left-style , border-right-style , border-top-style , border-bottom-style .
Синтаксис
Значения
| Значение | Описание |
|---|---|
| solid | Сплошная линия. |
| dotted | Граница в виде точек. |
| dashed | Граница в виде тире. |
| ridge | Граница в виде выпуклой линии. |
| double | Граница в виде двойной линии. Чтобы увидеть эффект толщина границы должна быть минимум 3px . |
| groove | Вогнутая граница. |
| inset | Вдавленная граница. |
| outset | Выпуклая граница. |
| none | Отсутствие границы. |
Значение по умолчанию: none .
Количество значений
Свойство может принимать 1 , 2 , 3 или 4 значений, указываемых через пробел:
| Количество | Описание |
|---|---|
| 1 | Тип для всех сторон одновременно. |
| 2 | Первое значение для верха и низа, второе — для левой и правой границ. |
| 3 | Первое значение для верха, второе — для левой и правой границ, третье — для нижней. |
| 4 | Первое значение для верхней границы, второе — для правой, третье — для нижней, четвертое — для левой границы. |
Стиль границ
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.
CSS свойство border-style
Это свойство определяет стиль всех четырех сторон рамки HTML элемента. Свойство border-style может принимать от одного до четырех значений.
- border-style: dotted solid double dashed;
- верхняя сторона рамки состоит из точек (dotted)
- правая сторона рамки сплошная линия (solid)
- нижняя сторона рамки двойная сплошная линия (double)
- левая сторона рамки состоит из черточек (dashed)
- верхняя сторона рамки состоит из точек (dotted)
- правая и левая стороны рамки сплошная линия (solid)
- нижняя сторона рамки двойная сплошная линия (double)
- верхняя и нижняя стороны рамки состоят из точек (dotted)
- правая и левая стороны рамки сплошная линия (solid)
- все четыре стороны рамки состоят из точек (dotted)
CSS синтаксис
border-style: значение;
Возможные значения
Значение Описание none Значение по умолчанию. Без рамки. hidden То же, что и none, за исключением разрешения конфликтов с рамками в элементах таблиц. dotted Рамка состоит из точек. dashed Рамка состоит из черточек. solid Сплошная линия. double Двойная сплошная линия. groove 3-D рамка, представляющая прорезанный желоб. Эффект зависит от значения свойства border-color. ridge 3-D рамка, представляющая оттиснутую борозду. Эффект зависит от значения свойства border-color. inset 3-D рамка, представляющая вдавленное углубление. Эффект зависит от значения свойства border-color. outset 3-D рамка, представляющая выставленное возвышение. Эффект зависит от значения свойства border-color. initial Устанавливает значение по умолчанию. inherit Значение наследуется от родительского элемента. Пример использования
Устанавливаем стиль для четырех сторон рамки параграфа