border | CSS | WebReference
- Содержание
- Краткая информация
- Синтаксис
- Значения
- Пример
- Примечание
- Спецификация
- Браузеры
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.
| Значение по умолчанию | Зависит от использования |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
border: border-width || border-style || border-color
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| 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. Применение свойства border
Объектная модель
Объект.style.border
Примечание
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендация |
| CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 4 | 7 | 12 | 1 | 3. 5 | 1 | |
| 1 | 1 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Границы
См. также
- border-bottom
- border-left
- border-right
- border-top
- Блочные элементы
- Граница в CSS
- Добавление треугольника
- Колесо для сокращённых свойств
- Открываем блочную модель
- Повёрнутые рамки
- Рамка вокруг изображений
- Свойство border
- Строчные элементы
Рецепты
- Как добавить рамку вокруг кнопки?
- Как добавить рамку вокруг ячеек?
- Как добавить рамку к изображению при наведении?
- Как добавить рамку к изображению?
- Как сделать рамку вокруг таблицы?
Практика
- Рамка вокруг картинок
- Рамка вокруг ссылки
- Рамка вокруг таблицы
- Рамка вокруг ячеек
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 27.
08.2017
Редакторы: Влад Мержевич
HTML и CSS с примерами кода
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.
- 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
Синтаксис
/* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* Global values */ border: inherit; border: initial; border: unset;
Значения
Значение border-width определяет толщину границы.
Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
Значение по-умолчанию: Зависит от использования
Применяется к: Ко всем элементам
Спецификации
- CSS Backgrounds and Borders Module Level 3
- CSS Level 2 (Revision 1)
- CSS Level 1
Описание и примеры
<!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>
Эти слова
совершенно справедливы, однако генеративная поэтика
аннигилирует урбанистический скрытый смысл.
</div>
</body>
</html>
В данном примере вокруг блока добавляется двойная граница.
Как создать цветную рамку вокруг текста с помощью HTML и CSS
Обновлено: 31.07.2022 автором Computer Hope
Используя рамки, вы можете добавить рамку вокруг текста и установить или изменить границу практически любого цвета. Граница на вашей HTML-странице помогает привлечь внимание к разделу текста или окружить любые другие элементы HTML. Границы добавляются в HTML с помощью CSS.
- Граница CSS
- Добавьте границу, используя атрибут стиля.
- Добавьте границу с помощью класса CSS.
Граница CSS
Граница CSS имеет свойства для типа линии (сплошная, пунктирная и т. д.), ширины линии и цвета линии. В следующей таблице приведены подробные сведения о каждом из них и допустимые значения для их правильной работы.
| Свойство границы CSS | Допустимые значения | Пример |
|---|---|---|
| граница (все стороны) граница вверху (только верхняя строка) граница справа (только правая строка) граница внизу (только нижняя строка) border-left (только левая строка) | Любая допустимая комбинация перечисленных ниже свойств. | тонкий черный в горошек |
| бордюр (со всех сторон) | сплошная пунктирная пунктирная двойная бороздчатая ребристая врезная узкая без скрытая | твердый |
| ширина границы (все стороны) | ширина, указанная в px, pt, cm, em ширина, указанная как тонкая, средняя или толстая | 3 пикселя |
| цвет рамки (все стороны) | цвет, указанный как код цвета цвет, заданный как именованный цвет | #FF00FF |
Добавьте границу, используя атрибут стиля
HTML-теги можно форматировать с использованием атрибута стиля .
Чтобы добавить границу с помощью атрибута стиля, добавьте границу CSS в кавычки после style= .
< HTML-тег >
В приведенном ниже примере мы окружили абзац (
) сплошной красной рамкой шириной 3 пикселя. Первый пример с текстом, обведенным красной рамкой.
В этом примере также несколько строк.
Для создания приведенного выше примера используется приведенный ниже код.
< p >Первый пример с текстом, обведенным красной рамкой.
Этот пример также содержит несколько строк. p >
В приведенном выше коде CSS определяет размер границы (сокращение от «пиксель»), тип стиля и цвет границы. Стиль границы — это то, как граница отображается на экране. В нашем примере мы использовали «сплошной» стиль границы. Цвет границы определяет цвет, который вы хотите использовать для границы. В приведенном выше примере используется цветовой код #FF0000, который является цветовым кодом для красного цвета.
Кончик
Граница также может применяться только к одной стороне. Например, заголовок этой страницы подчеркнут серым цветом. Эта линия на самом деле является рамкой, полученной с помощью кода CSS border-bottom: 1px solid #93B0D2; .
Размещение форматирования CSS внутри атрибута стиля может быть применено к другим тегам HTML, таким как тег div или тег span. В приведенном ниже примере граница добавляется к одному слову с помощью тега span.
Вот второй пример со словом с рамкой, с разными стилями, примененными к верхней, нижней, левой и правой сторонам.
Для создания приведенного выше примера используется следующий код.
< диапазон >слово диапазон >
Добавьте границу с помощью класса CSS
Внешний вид элементов на веб-странице также можно определить с помощью встроенного CSS. Встроенный CSS определяется в вашем HTML-документе в элементе
.
Или вы можете определить CSS во внешнем файле с расширением .css . Затем вы можете ссылаться на этот файл с любой HTML-страницы, и элементы в этом документе могут использовать стили CSS. Например, с помощью приведенного ниже кода CSS создается новый класс с именем «borderexample», который можно применить к любому тегу HTML. < стиль >
.borderexample {
ширина границы: 3px;
стиль границы: сплошной;
цвет границы:#287EC7;
}
стиль > Используя приведенный выше код, если вы хотите применить этот стиль границы к абзацу или слову HTML, вы можете ввести что-то похожее на пример ниже.
< p >Вот пример границы, созданной с помощью CSS. p > < p >Класс также может быть < span >использован span > на теге span. p >
На вашей веб-странице приведенный выше код будет выглядеть так, как показано ниже.
Вот пример границы, созданной с помощью CSS.
Класс также можно использовать в теге span.
- Дополнительная справка и информация о таблицах HTML.
- См. наше определение границ для получения дополнительной информации на соответствующих страницах.
- Справка и поддержка цветов CSS и HTML.
Границы и отступы: MGA
О DoITHTML TutorialJavaScript TutorialXML TutorialPHP Tutorial
Глава 1. Создание веб-страницГлава 2. Базовый макет документаГлава 3. Основные стили документаГлава 4. Форматирование текстаГлава 5. Графические изображенияГлава 6. Применение специальных стилейГлава 7. Связывание страницГлава 8. Использование -sГлава 9. Таблицы Воспроизведение мультимедиаГлава 10. Создание формГлава 11. Дизайн веб-сайтовHTML/CSS Приложение
Списки стилейГраницы и отступыРазмер элементовРазмещение элементов
Почти все элементы HTML могут иметь границы и могут включать отступы (пробелы) вокруг
их содержание. Это имеет место независимо от того, есть ли обычно границы вокруг
элемента или является ли пространство для заполнения нормальной характеристикой тега.
Стили границ
Стили границы включают свойства, относящиеся к типу границы, ее ширине и цвет. В следующей таблице перечислены эти свойства.
| Недвижимость | Значение |
|---|---|
| стиль границы стиль границы сверху стиль границы справа стиль границы снизу стиль границы слева | пунктирная пунктирная двойная канавка вставка нет начало ребро сплошная |
| ширина границы ширина верхней границы граница-правая-ширина граница-нижняя-ширина граница-левая-ширина | тонкий средний толстый n пикс. |
| цвет границы цвет границы сверху цвет границы справа цвет границы снизу цвет границы слева | #000000 — #FFFFFF название цвета RGB( р,г,б ) |
| граница | граница: стиль размер цвет |
Рисунок 6-15.
Стили и свойства границ.
Стиль границы, ширину и цвет можно применить ко всем четырем сторонам. элемента XHTML, или их можно выборочно применять к отдельным сторонам. Например, пять типов свойств стиля границы:
border-style — применяется ко всем четырем сторонам border-top-style — применяется только к верхнему краю — только к правому краю border-right-style border-bottom-style — применяется только к нижнему краю border-left-style — применяется только к левому краю
Когда спецификация границы применяется ко всем четырем сторонам элемента, ярлык Свойство border объединяет и разделяет пробелами следующие значения в пределах одно объявление свойства: стиль, ширина и цвет, в таком порядке . Другими словами, вместо кодирования трех отдельных спецификаций,
стиль границы: сплошной
ширина границы: 1px
цвет границы: черный
эти настройки можно комбинировать в пределах одного свойства границы:
граница: сплошная 1 черная
Все три значения указывать не обязательно, но остальные должны быть в
правильный порядок: граница: сплошная 1px (цвет не указан).
Есть восемь стилей границ, из которых можно выбрать. Эти стили показаны на рис. 6-16. с их шириной, установленной на 3 пикселя. При меньшей ширине рамки некоторые стили не отображаются.
твердый пунктирная пунктирный двойной канавка вставка начало хребетРис. 6-16. Стили границ.
Границы обычно применяются к тегам, таким как Чтобы проиллюстрировать варианты стилей, следующее разделение отображается с рамкой
который имеет разные стили на всех четырех сторонах. Раздел заключает в себе абзац, который
имеет свои собственные настройки границ и включает текстовую строку с собственной границей. Это текстовая строка с границами Листинг 6-15. Код для различных стилей границ. Это текстовая строка с границами внутри абзаца.
с границами внутри подразделения с четырьмя разными границами. Рис. 6-17. Границы вокруг элементов страницы. Поскольку объемлющее деление имеет разные границы на каждой из четырех сторон,
индивидуальные характеристики даны для каждой стороны. Поскольку появляются одинаковые границы
вокруг всех сторон абзаца и натянутого текста, сокращенное свойство границы
объявляется для этих контейнеров. Хотя вы, наверное, не пойдете на эту крайность
при добавлении границ к элементам страницы в этом примере показаны различные настройки границ
что можно сделать. Альтернативой обычным границам может быть использование border-radius. Это свойство
придает скошенный вид углам содержимого контейнера. В отличие от обычных границ, border-radius допускает больше настроек. Например, с
это свойство, вы можете настроить каждый угол сразу, каждый в отдельности, или вы
можно использовать комбинацию скошенных и правильных углов для достижения разнообразного вида.
Кроме того, контейнеры, оформленные с использованием радиуса границы, могут по-прежнему иметь обычную границу.
вокруг него. Рисунок 6-19показывает примеры этих приложений. Свойства стиля для добавления радиуса границы к контейнеру показаны на рис. 6-18. Рисунок 6-18. Стоит отметить, что хотя свойство border-radius хорошо работает с контейнером
элементы, такие как div или span, не всегда правильно отображаются при применении
к изображениям. Таким образом, чтобы получить закругленный угол изображения,
иногда необходимо сначала обернуть изображение в содержащий элемент, например
div или span и примените к ним свойство border-radius. Листинг 6-16. Код для добавления радиуса границы к различным объектам. Примеры применения Border-radius. В приведенном выше примере оформления рамки свернуты вокруг текста, который они заключают.
В большинстве случаев для визуальной привлекательности и удобочитаемости вы захотите оставить пустое место.
между текстом и его границей. Это достигается введением прокладка внутри текстового контейнера. Padding — это расстояние между границами контейнера.
и его вложенное содержимое. Заполнение добавляется в контейнер со свойствами стиля, показанными на рис. 6-20.
свойство padding вводит пустое пространство вокруг всех четырех сторон контейнера;
padding-top, padding-right, padding-bottom и padding-left применяются выборочно
отступы с каждой из четырех сторон. Рисунок 6-20. Следующий код является повторением предыдущего деления с добавлением отступов. Это текстовая строка с границами Листинг 6-17. Код для добавления радиуса границы к различным объектам. Это текстовая строка с границами внутри абзаца.
с границами внутри подразделения с четырьмя разными границами. Рисунок 6-21. Заполнение окружающих текстовых элементов. Границы могут отображаться вокруг изображения путем кодирования стиля границы. Следующее
Код создает ребристую границу шириной 7 пикселей, как показано слева на рис. 6-23. Рисунок 6-22 . Картины с бордюрами. Вы не можете отделить границу от изображения, введя отступы вокруг
сама картина. Вы можете поместить изображение в другой контейнер, например теги, которые являются контейнерами для
текст. Однако вы можете поэкспериментировать с другими тегами, чтобы увидеть их эффекты границ. <тип стиля = "текст/css">
div#A {border-width:7px;
цвет границы: красный;
стиль верхней границы: сплошной;
стиль границы справа: пунктир
бордюрный нижний стиль: ребро;
стиль границы слева: двойной}
p#B {граница: пунктирная 3px синяя}
span#C {граница: сплошная 4 пикселя, зеленая}
<дел>
внутри абзаца с границами внутри раздела с четырьмя разными
границ.
Радиус границы
Недвижимость Значение радиус границы
радиус границы вверху слева
радиус границы вверху справа
радиус границы внизу слева
радиус границы внизу справа n пикселей
n em
Границы вокруг элементов страницы. <тип стиля = "текст/css">
раздел № А
{
ширина: 5em;
высота: 5см;
цвет фона: красный;
граница: сплошная синяя шириной 2 пикселя;
радиус границы: 1em;
}
раздел#B
{
граница-верхний-правый-радиус: 2em;
граница-нижний-левый-радиус: 2em;
}
<дел>
jpg"> Рис. 6-19.
Стили набивки
Недвижимость Значение padding
padding-top
padding-right
padding-bottom
padding-left n пикселей
n em
Свойства стиля заполнения. теги
для введения дополнительного пространства между текстом и окружающими его границами. Другой
Эффекты могут быть достигнуты путем указания различных величин отступов на каждой из четырех сторон. <тип стиля = "текст/css">
div#A {padding:7px;
ширина границы: 7 пикселей;
цвет границы: красный;
стиль верхней границы: сплошной;
стиль границы справа: пунктир;
бордюрный нижний стиль: ребро;
стиль границы слева: двойной}
p#B {padding:7px; граница: пунктирная 3 пикселя синяя}
span#C {padding:2px; граница: сплошная 4 пикселя, зеленая}
<дел>
внутри абзаца с границами внутри раздела с четырьмя разными
границ.
Рамки изображения
и добавьте отступы в этот контейнер.