Tel: +372 5596 5762
e-mail: info@digipo.eu

В этой главе мы поговорим о том, как сделать с помощью CSS рамку - бордюр, вокруг того или иного элемента. В HTML эта задача лежала на плечах атрибута border, однако его можно было применить далеко не к каждому тегу (элементу) да и не всегда он мог решить ту или иную дизайнерскую задумку.
В CSS эту задачу берёт на себя одноимённое базовое свойство border и значительно расширяет круг возможностей при работе со стилем границы любого элемента выводимого на экран.

 

Стиль границы.
Если в HTML бордюр мог быть только в виде сплошной линии вокруг элемента, то в CSS это уже достаточно широкий набор возможных стилей рамок.
Свойство border-style может присваивать элементу один из ниже перечисленных стилей границы.

  • none - граница отсутствует (по умолчанию).
  • dotted - граница из ряда точек.
  • dashed - пунктирная граница.
  • solid - сплошная граница
  • double - двойная граница
  • groove - граница "бороздка"
  • ridge - граница "гребень"
  • inset - вдавленная граница
  • outset - выдавленная граница

Пример CSS:
p {background-color: #f5f5f5;text-align: center;}

Пример HTML:
<head>
<title>My CSS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p style="border-style: none;">граница отсутствует</p>
<p style="border-style: dotted;">граница из ряда точек</p>
<p style="border-style: dashed;">пунктирная граница</p>
<p style="border-style: solid;">сплошная граница</p>
<p style="border-style: double;">двойная граница</p>
<p style="border-style: groove;">граница "бороздка"</p>
<p style="border-style: ridge;">граница "гребень"</p>
<p style="border-style: inset;">вдавленная граница</p>
<p style="border-style: outset;">выдавленная граница</p>
</body>
</html>

border

Стиль бордюра может быть задан как для всех сторон элемента одновременно, так и для каждой его стороны отдельно в зависимости от того, сколько значений присвоено свойству border- style. Таковых значений может быть от одного до четырёх по числу сторон элемента.
В каждом из четырёх случаев действуют свои "правила" по присуждению стиля рамки той или иной стороне элемента, которые приведены в таблице ниже:

Число значенийРезультат
1

Пример:div {border-style: solid;}

  • Первое значение - Устанавливает единый стиль бордюра для всех сторон элемента.
2

Пример:div {border-style: solid double;}

  • Первое значение - Устанавливает стиль верхней и нижней границы элемента.
  • Второе значение - Устанавливает стиль левой и правой границы элемента.
3

Пример:div {border-style: solid double dashed;}

  • Первое значение - Устанавливает стиль верхней границы элемента.
  • Второе значение - Устанавливает стиль левой и правой границы элемента.
  • Третье значение - Устанавливает стиль нижней границы элемента.
4

Пример:div {border-style: solid double dashed ridge;}

  • Первое значение - Устанавливает стиль верхней границы элемента.
  • Второе значение - Устанавливает стиль правой границы элемента.
  • Третье значение - Устанавливает стиль нижней границы элемента.
  • Четвёртое значение - Устанавливает стиль левой границы элемента.

Толщина границы.
Свойство border-width - устанавливает ширину границы элемента.
Ширина бордюра может быть заданна с помощью следующих аргументов:

  • thin - тонкая граница
  • medium - средняя толщина границы
  • thick - толстая граница

А также в пикселях или любых других единицах измерения принятых в CSS.

Цвет границы.
Цвет рамки или её сторон по отдельности определяется свойством border-color.
Цвет бордюра может иметь следующие значения:

  • #ff0000 - шестнадцатеричное значение цвета RGB.
  • red - именное значение цвета.
  • RGB(255,0,0) - значение цвета RGB.
  • transparent - прозрачная граница.

Ну и так же как и в случаях с толщиной и стилем, цвет бордюра тоже может иметь от одного до четырёх цветовых значений при каждом "раскладе" окрашивая нужные стороны бордюра как показано в таблице ниже.

Число значенийРезультат
1

Пример:div {border-style: solid; border-width: 3px; border-color: #008000;}

  • Первое значение - Устанавливает единый цвет бордюра со всех сторон.
2

Пример:div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff;}

  • Первое значение - Устанавливает цвет верхней и нижней границы элемента.
  • Второе значение - Устанавливает цвет левой и правой границы элемента.
3

Пример:div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff #ff0000;}

  • Первое значение - Устанавливает цвет верхней границы элемента.
  • Второе значение - Устанавливает цвет левой и правой границы элемента.
  • Третье значение - Устанавливает цвет нижней границы элемента.
4

Пример:div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff #ff0000 #ffff00;}

  • Первое значение - Устанавливает цвет верхней границы элемента.
  • Второе значение - Устанавливает цвет правой границы элемента.
  • Третье значение - Устанавливает цвет нижней границы элемента.
  • Четвёртое значение - Устанавливает цвет левой границы элемента.

Границы справа слева сверху и снизу отдельно.

Для того, что бы определить стиль, цвет и ширину бордюра для одной из сторон элемента, пользуйтесь свойствами border-bottom, border-left, border-right, border-top и их дочерними "коллегами по цеху" список которых приведён ниже:
border-bottom - Определяет стиль, цвет и ширину нижней границы элемента.

  • border-bottom-color - Устанавливает цвет нижней границы элемента.
  • border-bottom-style - Определяет стиль нижней границы элемента.
  • border-bottom-width - Определяет ширину нижней границы элемента.

border-left - Определяет стиль, цвет и ширину левой границы элемента.

  • border-left-color - Устанавливает цвет левой границы элемента.
  • border-left-style - Определяет стиль левой границы элемента.
  • border-left-width - Определяет ширину левой границы элемента.

border-right - Определяет стиль, цвет и ширину правой границы элемента.

  • border-right-color - Устанавливает цвет правой границы элемента.
  • border-right-style - Определяет стиль правой границы элемента.
  • border-right-width - Определяет ширину правой границы элемента.

border-top - Определяет стиль, цвет и ширину верхней границы элемента.

  • border-top-color - Устанавливает цвет верхней границы элемента.
  • border-top-style - Определяет стиль верхней границы элемента.
  • border-top-width - Определяет ширину верхней границы элемента.

Задание

Сделайте рамки как показано на рисунке ниже

Примеры border

В предыдущем уроке рассматривали поля и отступы

В следующем уроке рассмотрим высоту и ширину