/css/border:> Свойство рамки_

Свойство border

Синтаксис

CSS 1
CSS 2‒2.2
CSS 3
border: [ <border-width> || <border-style> || <border-color> ] | inherit;

Описание

Свойство border одновременно задаёт все основные параметры рамки объекта (ширину, стиль, цвет).

Применяется: ко всем элементам;
Наследование: отсутствует;
Проценты: не используются;
Медиа: визуальные.

Примечание

Необходимо учитывать, что разные браузеры по-разному могут отображать устанавливаемые рамки. Так, например, в веб-браузерах Chrome и Firefox рамки заметно отличаются друг от друга.

Условия использования

Значения параметров должны быть отделены друг от друга пробелами, при этом расположение самих значений не имеет существенного значения. Допускается вариант с одним отсутствующим значением (например, «dotted #ffeeaa»).

JavaScript

[объект].style.border="[значение]";


Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

Спецификация


Значения

<border-width>
Задаёт ширину для всей рамки.

5-и пиксельная рамка красного цвета border: 5px solid red;

<border-style>
Задаёт стиль для всей рамки.

3-х пиксельная точечная рамка красного цвета border: 3px dotted red;

<border-color>
Задаёт цвет для всей рамки.

Красная рамка шириной в 3 пикселя border: 3px solid #ff0000;

inherit
Указывает, что элемент должен унаследовать параметры рамки родительского элемента.

Начальное значение: Смотрим индивидуальные свойства.


Пример использования

Листинг кода
<!DOCTYPE html>
<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>
Свойство border