border | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | Зависит от использования |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-border |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.
Синтаксис
border: [border-width || border-style || border-color] | inherit
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border</title> <style> .brd { border: 4px double black; /* Параметры границы */ background: #fc3; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ } </style> </head> <body> <div> 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>
В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.
Рис. 2. Применение свойства border
Объектная модель
[window.]document.getElementById(«elementID»).style.border
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
htmlbook.ru
CSS-рамка
CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding. Рамка задаётся с помощью краткого свойства border. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина
Оформление рамок и границ HTML-элементов с помощью CSS-свойств
1. Стиль рамки border-style
По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
| border-style (border-top-style, border-right-style, border-bottom-style, border-left-style) | |
|---|---|
| Значения: | |
| none | Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства. |
| hidden | Эквивалентно none. |
| dotted | dotted |
| dashed | dashed |
| solid | solid |
| double | double |
| groove | groove |
| ridge | ridge |
| inset | inset |
| outset | outset |
| {1,4} | Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style: |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {border-style: solid;}
p {border-top-style: solid;}2. Цвет рамки border-color
Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.
| border-color (border-top-color, border-right-color, border-bottom-color, border-left-color) | |
|---|---|
| Значения: | |
| transparent | Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента. |
| цвет | Цвет рамок задается при помощи значений свойства color.{border-color: #cacd58;} |
| {1,4} | Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color: |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {border-color: #cacd58;}3. Ширина рамки border-width
Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.
| border-width (border-top-width, border-right-width, border-bottom-width, border-left-width) | |
|---|---|
| Значения: | |
| thin / medium / thick | Ключевые слова, устанавливают ширину рамки относительно друг друга. Первое значение уже, чем второе, второе — тоньше третьего. Значение по умолчанию — |
| width (px, em) | {border-width: 5px;} |
| {1,4} | Возможность одновременного задания четырех разных ширин для рамок элемента, только для свойства border-width: |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {border-width: 2px;}4. Задание рамки одним свойством
Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:
div {
width: 100px;
height: 100px;
border: 2px solid grey;
}При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.
5. Задание рамки для одной границы элемента
В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width, border-style и border-color. Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.
Стиль верхней границы задается с помощью свойства border-top, нижней — border-bottom, левой —
Синтаксис
p {border-top: 2px solid grey;}html5book.ru
CSS: border — границы элементов в CSS.
Для управления границей элемента применяется универсальное свойство border. Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.
| Значение по умолчанию | Зависит от элемента |
|---|---|
| Применяется | К любым элементам |
| Наследуется | Нет |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-border |
Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:
<!DOCTYPE html>
<html>
<head>
<title>Границы в CSS</title>
<style>
div {
background-color: #BDD8F9;
width: 400px;
height: 100px;
border: 3px solid red; /* задаём границу */
margin: 0 auto;
text-align: center
}
</style>
</head>
<body>
<div>Блок div с рамкой 3px красного цвета.</div>
</body>
</html>Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).
<!DOCTYPE html>
<html>
<head>
<title>Границы в CSS</title>
<style>
div {
background-color: #BDD8F9;
width: 400px;
height: 100px;
margin: 0 auto;
text-align: center;
border-top: 3px dotted black;
border-right: 5px solid red;
border-bottom: 10px dashed green;
border-left: 12px solid yellow;
}
</style>
</head>
<body>
<div>Блок div с разными границами.</div>
</body>
</html>В этом примере для каждой стороны блока задана своя толщина границы, стиль и цвет.
Подумайте, как при помощи CSS можно создать такую фигуру:
Значения границы — толщину, стиль и цвет — можно задать отдельно используя специальные свойства.
- border-style — стиль границы.
- border-width — ширина границы.
- border-color — цвет границы.
Рассмотрим каждое из значений по отдельности.
Свойство border-style. Стиль границы.
Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:
- none — граница отсутствует (по умолчанию).
- solid — сплошная граница.
- double — двойная граница.
- dashed — пунктирная граница.
- dotted — граница из ряда точек.
- ridge — граница «гребень».
- groove — граница «бороздка».
- inset — вдавленная граница.
- outset — выдавленная граница.
Примеры того, как они выглядят.
граница отсутствует (none)
сплошная граница (solid)
двойная граница (double)
граница из ряда точек (dotted)
пунктирная граница (dashed)
граница «бороздка» (groove)
граница «гребень» (ridge)
вдавленная граница (inset)
выдавленная граница (outset)
Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.
Блок div с рамкой чёрного цвета и стиля ridge.
Рамка выглядит как solid, но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.
При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style, в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.
Одно значение (solid) — стиль границы установлен для всех сторон блока.
Два значения (solid double) — первое значение установило стиль для верхней и нижней сторон, второе для боковой.
Три значения (solid double dotted) — первое значение для верхней стороны, второе для боковых, стретье для нижней.
Четыре значения (solid double dotted dashed) — каждое значение для одной стороны по часовой стрелке начиная с верхней.
Свойство border-width. Толщина границы.
Для установки толщины границы элемента используется свойство border-width. Толщину границы можно задать в любых абсолютных единицах измерения, например в пикселах.
Как и для свойства border-style, для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.
Одно значение (2px) — толщина границы установлен для всех сторон блока.
Два значения (1px 5px) — первое значение установило толщину для верхней и нижней сторон, второе для боковой.
Три значения (1px 3px 5px) — первое значение для верхней стороны, второе для боковых, стретье для нижней.
Четыре значения (1px 3px 5px 7px) — каждое значение для одной стороны по часовой стрелке начиная с верхней.
Код примера:
<!DOCTYPE html>
<html>
<head>
<title>Толщина границы в CSS</title>
<style>
div {
width: 400px;
margin: 0 auto;
text-align: center;
font-family: Tahoma;
font-size: 10pt;
padding: 10px;
border-style: solid;
}
</style>
</head>
<body>
<div>Одно значение (2px) - толщина границы установлен для всех сторон блока.</div>
<br>
<div>Два значения (1px 5px) - первое значение установило толщину для верхней и нижней сторон, второе для боковой.</div>
<br>
<div>Три значения (1px 3px 5px) - первое значение для верхней стороны, второе для боковых, стретье для нижней.</div>
<br>
<div>Четыре значения (1px 3px 5px 7px) - каждое значение для одной стороны по часовой стрелке начиная с верхней.</div>
</body>
</html>Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:
- thin — тонкая граница;
- medium — средняя толщина;
- thick — толстая граница;
Толщина границы: thin.
Толщина границы: medium.
Толщина границы: thick.
Свойство border-color. Цвет границы.
Для управления цветом границы используется средство border-color. Цвета для этого свойства можно задать используя любой способ, описанный в статье «Цвета в CSS», а именно:
- Шестнадцатеричная запись (#ff00aa) цвета.
- Формат RGB — rgb(255,12,110). Формат RGBA для CSS3.
- Форматы HSL и HSLA для CSS3.
- Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS.
Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.
Одно значение (red).
Два значения (red black).
Три значения (red black yellow).
Четыре значения (red black yellow blue).
Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:
Вот код, который рисует такую фигуру, только побольше размером:
<!DOCTYPE html>
<html>
<head>
<title>Толщина границы в CSS</title>
<style>
div {
width: 0px;
hight: 0px;
margin: 0 auto;
padding: 0px;
border-style: solid;
border-width: 200px;
border-color: yellow blue red black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Установка значений для сторон отдельно
Выше упоминалось, что можно указать значения свойств границы только для одной стороны блока. Для этих целей есть свойства:
- border-top (верхняя граница)
- border-right (правая граница)
- border-bottom (нижняя граница)
- border-left (левая граница)
Напомню, для всех свойств указывается три значения (толщина, стиль и цвет) в любом порядке. Но существуют свойства, которые позволяют устанавливать толщину, цвет и стиль для каждой стороны отдельно. Написание этих свойст производно от вышеуказанных.
Параметры верхней границы (border-top).
- border-top-color — задаёт цвет верхней границы элемента.
- border-top-width — задаёт толщину верхней границы элемента.
- border-top-style — задаёт стиль верхней границы элемента.
Параметры правой границы (border-right).
- border-right-color — задаёт цвет правой границы элемента.
- border-right-width — задаёт толщину правой границы элемента.
- border-right-style — задаёт стиль правой границы элемента.
Параметры нижней границы (border-bottom).
- border-bottom-color — задаёт цвет нижней границы элемента.
- border-bottom-width — задаёт толщину нижней границы элемента.
- border-bottom-style — задаёт стиль нижней границы элемента.
Параметры левой границы (border-left).
- border-left-color — задаёт цвет левой границы элемента.
- border-left-width — задаёт толщину левой границы элемента.
- border-left-style — задаёт стиль левой границы элемента.
Пример использования этих свойств:
<!DOCTYPE html>
<html>
<head>
<title>Толщина границы в CSS</title>
<style>
div {
width: 400px;
padding: 12px;
border-width: 3px;
border-style: solid;
border-top-color: red;
border-right-width: 10px;
border-bottom-style: double;
border-left-color: blue
}
</style>
</head>
<body>
<div>В этом примере блоку div сначала заданы границы толщиной 3px и стилем solid для всех сторон. Затем:
<ul>
<li>переопределён цвет верхней границы при помощи свойства border-top-color в красный,</li>
<li>при помощи свойства border-right-width установлена толщина правой границы 10px,</li>
<li>при помощи свойства border-bottom-style стиль нижней границы переопределён как double,</li>
<li>при помощи свойства border-left-color левой границе установлен синий цвет.</li>
</ul>
</div>
</body>
</html>Свойство border-radius. Округление углов границы.
Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).
Значениями могут быть любые числа, используемые в CSS.
Свойство border-radius: 15px.
Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:
Свойство border-radius: 15px.
Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все:
border-top-left-radius: 15px;
border-top-right-radius: 0;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0;Свойство border-radius: 15px.
Хотя этот код можно записать одним объявлением: border-radius: 15px 0 15px 0. Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.
| Число значений | Результат |
|---|---|
| 1 | Радиус указывается для всех углов блока. |
| 2 | Первое значение задает радиус верхнего левого и нижнего правого угла, второе значение — верхнего правого и нижнего левого угла. |
| 3 | Первое значение задает радиус для верхнего левого угла, второе — устанавливает радиус верхнего правого и нижнего левого углов одновременно, а третье — для нижнего правого уголка. |
| 4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. |
Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius: 15px 0. Всего два значения.
Немного практики
Рисуем лимон средствами CSS.
Вот код такого блока:
margin: 0 auto; /* Размещаем блок по центру */
width: 200px; height: 200px;
background: #F5F240;
border: 1px solid #F0D900;
border-radius: 10px 150px 30px 150px;Мы уже рисовали фигуру:
Теперь оставим от неё треугольник:
Код треугольника такой:
margin: 0 auto; /* Размещаем блок по центру */
padding: 0px;
width: 0px; height: 0;
border: 30px solid white;
border-bottom-color: red;komotoz.ru
border | CSS | WebReference
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.
Краткая информация
| Значение по умолчанию | Зависит от использования |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border</title>
<style>
.brd {
border: 4px double black; /* Параметры границы */
background: #fc3; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>
Познание текста, не учитывая количества слогов, стоящих между
ударениями, дает ямб. Эти слова совершенно справедливы,
однако генеративная поэтика аннигилирует урбанистический скрытый смысл.
</div>
</body>
</html>В данном примере вокруг блока добавляется двойная граница. Результат показан на рис. 2.
Рис. 2. Применение свойства border
Объектная модель
Объект.style.border
Примечание
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 27.08.2017
Редакторы: Влад Мержевич
webref.ru
Свойство border | CSS справочник
CSS свойстваОпределение и применение
CSS свойство border позволяет установить все свойства границ в одном объявлении. Разрешается использовать объявление в котором одно из значений отсутствует.
Свойства, которые можно установить:
- ширина границы — border-width (medium | thin | thick | length | initial | inherit).
- стиль границы — border-style (none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit).
- цвет границы — border-color (color | transparent | initial | inherit).
Поддержка браузерами
CSS синтаксис:
border:"border-width border-style border-color | initial | inherit";
JavaScript синтаксис:
object.style.border="2px solid orange"
Значения свойства
| Значение | Описание |
|---|---|
| border-width | Задает ширину границы. По умолчанию — «medium». |
| border-style | Задает стиль границы. По умолчанию — «none». |
| border-color | Задает цвет границы. По умолчанию — цвет элемента. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS1Наследуется
Нет.Анимируемое
Да.Пример использования
<!DOCTYPE html>
<html>
<head>
<title> Свойство background-repeat</title>
<style>
.primer {
border :4px solid orange; /* задаём сплошную границу шириной 4px оранжевого цвета */
background-color:khaki; /* задаём цвет заднего фона */
}
.primer2 {
border:2px dotted red; /* задаём пунктирную границу шириной 2px красного цвета */
}
</style>
</head>
<body>
<div class = "primer">Пример использования свойства border.</div>
<div class = "primer2">Пример использования свойства border.</div>
</body>
</html>
Пример использования свойства border.CSS свойстваbasicweb.ru
Свойство border-style — тип границы
Свойство border-style задает тип границы для всех сторон одновременно или отдельно для каждой стороны.
Существуют также свойства border-top-style, border-bottom-style, border-left-style, border-right-style, которые задают тип границы для каждой ее стороны.
См. также свойства border-color и border-style, а также свойство-сокращение для границы border.
Синтаксис
селектор {
border-style: solid | dotted | dashed | ridge | double | groove | inset | outset | none;
}селектор {
border-style: solid dotted;
}селектор {
border-style: solid dotted solid;
}селектор {
border-style: solid dotted solid dotted;
}Может принимать 1, 2, 3 или 4 параметра.
| Число параметров | Описание |
|---|---|
| 1 | Тип для всех сторон одновременно. |
| 2 | Первый параметр для верха и низа, второй — для левой и правой границ. |
| 3 | Первый параметр для верха, второй — для левой и правой границ, третий — для нижней. |
| 4 | Первый параметр для верхней границы, второй — для правой, третий — для нижней, четвертый — для левой границы. |
Значения
| Значение | Описание |
|---|---|
| solid | Сплошная линия. |
| dotted | Граница в виде точек. |
| dashed | Граница в виде тире. |
| ridge | Граница в виде выпуклой линии. |
| double | Граница в виде двойной линии. Чтобы увидеть эффект толщина границы должна быть минимум 3px! |
| groove | Вогнутая граница. |
| inset | Рамка. |
| outset | Рамка. |
| none | Отсутствие границы. |
Значение по умолчанию: none.
Примеры
Пример . Значение solid
#elem {
border-width: 1px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}Результат выполнения кода:
Пример . Значение dotted
#elem {
border-width: 1px;
border-style: dotted;
border-color: black;
width: 300px;
height: 100px;
}Результат выполнения кода:
Пример . Значение dashed
#elem {
border-width: 1px;
border-style: dashed;
border-color: black;
width: 300px;
height: 100px;
}Результат выполнения кода:
Пример . Значение ridge
#elem {
border-width: 3px;
border-style: ridge;
border-color: black;
width: 300px;
height: 100px;
}Результат выполнения кода:
Пример . Значение double
#elem {
border-width: 3px;
border-style: double;
border-color: black;
width: 300px;
height: 100px;
}Результат выполнения кода:
Пример . Значение groove
#elem {
border-width: 3px;
border-style: groove;
border-color: black;
width: 300px;
height: 100px;
}Результат выполнения кода:
Пример . Значение inset
#elem {
border-width: 3px;
border-style: inset;
border-color: black;
width: 300px;
height: 100px;
}Результат выполнения кода:
Пример . Значение outset
#elem {
border-width: 3px;
border-style: outset;
border-color: black;
width: 300px;
height: 100px;
}Результат выполнения кода:
Пример
В данном примере заданы различные типы границы для разных сторон элементов:
#elem {
border-width: 1px;
border-style: solid dotted dashed dotted;
border-color: black;
width: 300px;
height: 100px;
}Результат выполнения кода:
Пример
А сейчас для разных сторон элемента также задана различная толщина границы:
#elem {
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red blue green black;
width: 300px;
height: 100px;
}Результат выполнения кода:
Пример
Сейчас для верхней и нижней границы задан тип solid, а для правой и левой — dotted:
#elem {
border-width: 1px;
border-style: solid dotted;
border-color: black;
width: 300px;
height: 100px;
}Результат выполнения кода:
code.mu
Свойство border, border-left, border-right, border-top, border-bottom — свойства-сокращения для границы
Свойство border задает цвет, тип и толщину границы для всех сторон одновременно. Является свойством-сокращением для border-width, border-style и border-color. В отличие от сокращаемых свойств не может задавать разную границу для 4-х сторон сразу, а только одинаковую для всех.
Свойства border-left, border-right, border-top, border-bottom задают цвет, тип и толщину границы для определенных сторон.
| Свойство | Описание |
|---|---|
| border-left | Задает цвет, стиль и цвет левой границы. |
| border-right | Задает цвет, стиль и цвет правой границы. |
| border-top | Задает цвет, стиль и цвет верхней границы. |
| border-bottom | Задает цвет, стиль и цвет нижней границы. |
Синтаксис
Порядок свойств значения не имеет.
селектор {
border: толщина тип цвет;
}селектор {
border-left: толщина тип цвет;
}Значения
См. border-width, border-style, border-color.
Примеры
Пример
В данном примере будет черная граница толщиной в 1px:
#elem {
border: 1px solid black;
width: 300px;
height: 100px;
}Результат выполнения кода:
Пример
А здесь будет только левая граница:
#elem {
border-left: 1px solid black;
width: 300px;
height: 100px;
background-color: #E4F1ED;
}Результат выполнения кода:
Пример
Только правая граница:
#elem {
border-right: 1px solid black;
width: 300px;
height: 100px;
background-color: #E4F1ED;
}Результат выполнения кода:
Пример
Только нижняя граница:
#elem {
border-bottom: 1px solid black;
width: 300px;
height: 100px;
background-color: #E4F1ED;
}Результат выполнения кода:
Пример
Только верхняя граница:
#elem {
border-top: 1px solid black;
width: 300px;
height: 100px;
background-color: #E4F1ED;
}Результат выполнения кода:
code.mu