CSS: border. Границы элемента.

Для управления границей элемента применяется универсальное свойство border. Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Свойство 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, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:

  1. none - граница отсутствует (по умолчанию).
  2. solid - сплошная граница.
  3. double - двойная граница.
  4. dashed - пунктирная граница.
  5. dotted - граница из ряда точек.
  6. ridge - граница "гребень".
  7. groove - граница "бороздка".
  8. inset - вдавленная граница.
  9. 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 style="border-width: 2px;">Одно значение (2px) - толщина границы установлен для всех сторон блока.</div>
<br>
<div style="border-width: 1px 5px;">Два значения (1px 5px) - первое значение установило толщину для верхней и нижней сторон, второе для боковой.</div>
<br>
<div style="border-width: 1px 3px 5px;">Три значения (1px 3px 5px) - первое значение для верхней стороны, второе для боковых, стретье для нижней.</div>
<br>
<div style="border-width: 1px 3px 5px 7px;">Четыре значения (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 можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.

Табл. Свойство 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;