Свойство border
Синтаксис
border: [ <border-width> || <border-style> || <border-color> ] | inherit;
Описание
Свойство border
одновременно задаёт все основные параметры рамки объекта (ширину, стиль, цвет).
Применяется: | ко всем элементам; |
---|---|
Наследование: | отсутствует; |
Проценты: | не используются; |
Медиа: | визуальные. |
Примечание
Необходимо учитывать, что разные браузеры по-разному могут отображать устанавливаемые рамки. Так, например, в веб-браузерах Chrome и Firefox рамки заметно отличаются друг от друга.
Условия использования
Значения параметров должны быть отделены друг от друга пробелами, при этом расположение самих значений не имеет существенного значения. Допускается вариант с одним отсутствующим значением (например, «dotted #ffeeaa
»).
JavaScript
[объект]
Поддержка браузерами
Спецификация
Значения
- <border-width>
- Задаёт ширину для всей рамки.
border: 5px solid red;
- <border-style>
- Задаёт стиль для всей рамки.
border: 3px dotted red;
- <border-color>
- Задаёт цвет для всей рамки.
border: 3px solid #ff0000;
- inherit
- Указывает, что элемент должен унаследовать параметры рамки родительского элемента.
Начальное значение: Смотрим индивидуальные свойства.
Пример использования
<html>
<head>
<meta charset="utf-8">
<title>Свойство border</title>
<style type="text/css">
.examp { border: 1px solid green; }
</style>
</head>
<body>
<h1>Примеры использования "border"</h1>
<h2>Пример 1</h2>
<p><b>Работа с текстом:</b> <span class="examp">Часть текста</span> обрамлена рамкой.</p>
<hr>
<h2>Пример 2</h2>
<p>Создадим объект и обозначим его границы.</p>
<div style="width: 350px; height: 45px;" class="examp">Объект</div>
</body>
</html>