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
Редакторы: Влад Мержевич
border | htmlbook.ru
| Internet Explorer | Chrome | Opera | 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.
CSS3 границы (css3 border) | Vavik96
Использование параметра border не ограничивается одним лишь «1px solid black», с помощью границ можно создавать различные фигуры, причем достаточно один раз написать CSS-класс и применять его к множеству элементов на странице.
CSS3 border позволяет изменять внешний вид элемента. CSS границы является одним из широко используемых свойств CSS. С помощью CSS3 можно указать стиль, цвет и ширину границы элемента.
Стиль CSS3 границы:
Стиль для каждой стороны CSS границы элемента, таких как -верхняя, нижняя или боковая, может быть задан в стиле индивидуально. В CSS3 доступны различные типы стилей границы все они перечислены ниже.
- none
- hidden
- dotted
- dashed
- solid
- double
- dot-dash
- dot-dot-dash
- wave
- groove
- ridge
- inset
- outset
Пример CSS3 стиля границы:
.borderStyle{
border-style:dashed;
}Примечание: нет никакого способа контролировать расстояние между точками и тире.
Цвет границы (Border-color):
Атрибут “border-color” устанавливает цвет границы. Это может быть либо шестнадцатеричное значение, либо RGBA, или названия цветов, как красный, зеленый, синий ..
Примечание: вы должны установить стиль границы перед использованием свойства цвета.
Пример настройки цвета границ:
.borderStyle{
border-style:dotted;
border-color:#CCC;
}Ширина границы (Border-width):
Атрибут “Border-width” контролирует ширину границы, которая измеряется в пикселях.
Пример настройки ширины:
.borderStyle{
border-style:dotted;
border-color:#CCC;
border-width:5px;
}Пример объединённых стилей:
.borderStyle{
border:dashed 7px #0099FF;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:6px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
} Радиус границы CSS3:
Закругленными CSS углами пользуются в течение длительного времени. Теперь можно создавать закругленные углы без использования изображений в CSS3.
В этом уроке мы увидим, как создавать простые CSS3 закругленные углы или как управлять радиусом границы в CSS3. Прежде, чем идти в глубь свойств давайте посмотрим совместимость и простой радиус границы.
Таблица совместимости CSS3 радиуса:
Простой CSS3 Радиус границы:
Ниже простой пример использования радиус CSS3 границы.
.class {
border-radius: 20px;
}Чтобы сделать совместимость с Firefox и WebKit браузерами необходимо добавить префикс.
.borderStyle{
border:dashed 6px #000000;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
}CSS3 круг с использованием радиуса границы:
Мы можем легко сделать круг в CSS без изображений, только с использованием CSS3 радиуса границы.
.borderStyle{
border:dashed 4px #000000;
-moz-border-radius-topleft: 100px;
-moz-border-radius-topright:100px;
-moz-border-radius-bottomleft:100px;
-moz-border-radius-bottomright:100px;
-webkit-border-top-left-radius:100px;
-webkit-border-top-right-radius:100px;
-webkit-border-bottom-left-radius:100px;
-webkit-border-bottom-right-radius:100px;
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-left-radius:100px;
border-bottom-right-radius:100px;
}Ниже код для совместимости с IE. IE9 будет использовать границы радиуса по умолчанию.
.borderStyle{
border-bottom-left-radius: 152px 152px;
border-bottom-right-radius: 228px 228px;
border-bottom-style: dashed;
border-bottom-width: 42px;
border-left-style: dashed;
border-left-width: 42px;
border-right-style: dashed;
border-right-width: 42px;
border-top-left-radius: 152px 152px;
border-top-right-radius: 304px 304px;
border-top-style: dashed;
border-top-width: 42px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
} Попробуй так же: css3 border radius generator.
Оригинал / Перевод
Borders CSS уроки для начинающих академия
Свойства границы CSS
Свойства CSS border позволяют задавать стиль, ширину и цвет границы элемента.
У меня есть границы со всех сторон.
У меня есть красная Нижняя граница.
У меня округлые границы.
У меня синяя левая граница.
Стиль границы
Свойство border-style указывает тип отображаемой границы.
Допустимы следующие значения:
dotted— Определяет пунктирную границуdashed— Определяет пунктирную границуsolid— Определяет сплошную границуdouble— Определяет двойную границуgroove— Определяет 3D канавку границы. Эффект зависит от значения цвета границыridge— Определяет трехмерную ребристую границу. Эффект зависит от значения цвета границыinset— Определяет 3D-вставку границы. Эффект зависит от значения цвета границыoutset— Определяет трехмерную границу начала. Эффект зависит от значения цвета границыnone— Не определяет границыhidden— Определяет скрытую границу
Свойство border-style может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).
Пример
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.mix {border-style: dotted dashed solid double;}
Result:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A hidden border.
A mixed border.
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;border — граница блока | CSS справочник
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство border позволяет одновременно установить ширину, стиль и цвет для границы блока. Граница блока — обычная линия/рамка, которая окружает блок со всех сторон. Стоит учитывать, что при добавлении рамки она будет влиять на общий размер блока.
Значения разделяются пробелом и могут следовать в любом порядке, браузер сам определит, какое из них соответствует нужному параметру. Все три значения указывать не обязательно, ширину и/или цвет можно опустить, в этом случае вместо пропущенного значения будет использовано значение, которое установлено для свойства по умолчанию, т.е. если к примеру не указана ширина, то будет использовано значение по умолчанию свойства border-width. В таблице, расположенной под синтаксисом, указано значения каких именно свойств можно использовать.
Примечание: для того чтобы установить рамки только на определенных сторонах элемента, используйте следующие свойства: border-top, border-bottom, border-left, border-right.
Совет: как правило, при использовании рамки требуется добавлять внутренние отступы. Они добавляют пустое пространство между рамкой блока и его содержимым: текстом, картинками или дочерними тегами. Обычно граница отображается вплотную к содержимому элемента, это полезно только в том случае, если нужно задать рамку вокруг картинки.
| Значение по умолчанию: | не определено |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да, смотрите каждое свойство, входящее в состав краткого метода, отдельно |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.border=»3px solid blue» |
Синтаксис
border: border-width border-style border-color|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| border-width | Указывает ширину для рамки с помощью любой допустимой единицы измерения CSS (кроме процентов). |
| border-style | Указывает стиль для рамки, который определяется одним из ключевых слов: solid, dotted, dashed, double, groove, ridge, inset, outset, hidden и none. Значения hidden и none являются взаимозаменяемыми, они указывают, что рамка отсутствует. |
| border-color | Задает цвет для рамки одним из следующих способов: имя цвета, шестнадцатеричное значение или RGB, выбрать подходящий цвет или значение можно с помощью таблицы цветов. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style type="text/css">
p { border: 5px solid red; }
</style>
</head>
<body>
<p>Здесь содержится какой-то текст.</p>
</body>
</html>
Результат данного примера в окне браузера:
Свойство 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 свойства