Участник:Bhudh/Plage/CSS/BORDER
Свойство BORDER
Позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Синтаксис
border: border-width || border-style || border-color
border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений свойства border-style. Свойство border-color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.Каждое из значений можно устанавливать и по отдельности.
Также для установки рамки только на определенных сторонах элемента используются свойства border-top, border-bottom, border-left, border-right.
Внимание! Чтобы различные свойства стилей отобразились, может оказаться необходимым явно установить для элемента непустое значение атрибута border!
Например: <div border="1">
Свойство BORDER-COLOR
Устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.
Синтаксис
border-color: {значения}
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Результат зависит от количества аргументов:
| Число аргументов |
Результат |
|---|---|
| 1 | Цвет рамки будет установлен для всех сторон элемента. |
| 2 | Первый аргумент устанавливает цвет верхней и нижней границы, второй аргумент — левой и правой. |
| 3 | Первый аргумент задает цвет верхней границы, второй — одновременно левой и правой стороны, а третий — нижней границы. (То есть «сверху вниз») |
| 4 | Поочередно устанавливается цвет верхней, правой, нижней и левой границы. (То есть «по часовой стрелке», начиная с верхней границы) |
Примеры
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
- Ячейке задано свойство
border-color: red; - Ячейке задано свойство
border-color: red green; - Ячейке задано свойство
border-color: red green red;(Результат аналогичен предыдущему) - Ячейке задано свойство
border-color: red green blue; - Ячейке задано свойство
border-color: red green blue green;(Результат аналогичен предыдущему) - Ячейке задано свойство
border-color: green blue blue green;(Оформление углов ┏ и ┛) - Ячейке задано свойство
border-color:blue blue khaki khaki;(Оформление углов ┓ и ┗) - Ячейке задано свойство
border-color: red blue blue blue;(«Коробка с крышкой») - Ячейке задано свойство
border-color: blue blue blue red;(«Клетка с дверцей») - Ячейке задано свойство
border-color: green blue green orange;(Аналог 3-х аргументов для верхней и нижней границ) - Ячейке задано свойство
border-color: red green maroon blue;(Цвета всех границ разные)
Свойство BORDER-STYLE
Устанавливает стиль рамки вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
Синтаксис
border-style: стиль
Для управления видом рамки предоставляется восемь значений свойства. Вид рамки зависит от используемого браузера и заданной толщины границы.
Порядок и количество нескольких аргументов указывается аналогично тому, что указано в свойстве border-color.
Примеры
| 1 пиксел | 3 пиксела | 5 пикселов | 7 пикселов |
|---|---|---|---|
| dotted | dotted | dotted | dotted |
| dashed | dashed | dashed | dashed |
| solid | solid | solid | solid |
| double | double | double | double |
| groove | groove | groove | groove |
| ridge | ridge | ridge | ridge |
| inset | inset | inset | inset |
| outset | outset | outset | outset |
