Стиль границ
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 не может быть использован для указания пользовательского значения border-image (en-US), но вместо этого устанавливает его в начальное значение, т.е. none .
border: 1px; border: 2px dotted; border: medium dashed green;
Примечание: Рекомендуется использовать border , когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width , border-style (en-US), и border-color (en-US) принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.
Синтаксис
Свойство border указывается используя одно или более значений , , и указанных ниже.
Значения
Толщина границ. По умолчанию medium если отсутствует. Больше информации border-width .
Стиль линии границ. По умолчанию none если отсутствует. Больше информации border-style (en-US).
Цвет границ. По умолчанию принимает значение свойства элементов color (en-US). Больше информации border-color (en-US).
Обычный синтаксис
border =
|| (en-US)
|| (en-US)
=
| (en-US)
thin | (en-US)
medium | (en-US)
thick
=
none | (en-US)
hidden | (en-US)
dotted | (en-US)
dashed | (en-US)
solid | (en-US)
double | (en-US)
groove | (en-US)
ridge | (en-US)
inset | (en-US)
outset
Примеры
HTML
div class="fun-border">Look at my borders.div> p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!p> style contenteditable> .fun-border border: 2px solid red; > style>
CSS
style display: block; border: 1px dashed black; >
Результат
Спецификация
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # propdef-border |
- border-width : как и у каждого из подсвойств этого свойства:
- border-top-width (en-US): medium
- border-right-width (en-US): medium
- border-bottom-width (en-US): medium
- border-left-width (en-US): medium
- border-top-style (en-US): none
- border-right-style (en-US): none
- border-bottom-style (en-US): none
- border-left-style (en-US): none
- border-top-color (en-US): currentcolor
- border-right-color (en-US): currentcolor
- border-bottom-color (en-US): currentcolor
- border-left-color (en-US): currentcolor
- border-width : как и у каждого из подсвойств этого свойства:
- border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
- border-left-width (en-US): абсолютная длина или 0 , если border-left-style (en-US) — none или hidden
- border-right-width (en-US): абсолютная длина или 0 , если border-right-style (en-US) — none или hidden
- border-top-width (en-US): абсолютная длина или 0 , если border-top-style (en-US) — none или hidden
- border-bottom-style (en-US): как указано
- border-left-style (en-US): как указано
- border-right-style (en-US): как указано
- border-top-style (en-US): как указано
- border-bottom-color (en-US): вычисленный цвет
- border-left-color (en-US): вычисленный цвет
- border-right-color (en-US): вычисленный цвет
- border-top-color (en-US): вычисленный цвет
- border-color (en-US): как и у каждого из подсвойств этого свойства:
- border-bottom-color (en-US): цвет
- border-left-color (en-US): цвет
- border-right-color (en-US): цвет
- border-top-color (en-US): цвет
- border-bottom-width (en-US): длина
- border-left-width (en-US): длина
- border-right-width (en-US): длина
- border-top-width (en-US): длина
Совместимость браузеров
BCD tables only load in the browser
Также смотрите
- border-radius -related CSS properties: border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US), border-bottom-left-radius (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
border-style
Свойство border-style задает стиль для четырех границ. Это свойство может иметь от одного до четырех значений.
Примеры:
* border-style:dotted solid double dashed; — верхняя граница в-точку — правая граница обычная — нижняя граница двойная — левая граница в-тире
* border-style:dotted solid double; — верхняя граница в-точку — правая и левая границы обычные — нижняя граница двойная
* border-style:dotted solid; — верхняя и нижняя границы в-точку — правая и левая границы обычные
* border-style:dotted; — все четыре границы в-точку
Значение по умолчанию: не указано Наследуется: нет Версия: CSS1 Аргументы
Значение Описание none Граница отсутствует hidden То же, что и «none» dotted Граница в-точку dashed Граница в-тире solid Простая граница double Двойная граница groove Рифленная 3D граница. Эффект зависит от значения border-color ridge Очередной тип 3D границы. Эффект зависит от значения border-color inset Очередной тип 3D границы. Эффект зависит от значения border-color outset Очередной тип 3D границы. Эффект зависит от значения border-color inherit Значение должно быть унаследовано от элемента родителя 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.
Табл. 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 .