Участник:Bhudh/Plage/CSS/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

1. Ячейке задано свойство border-color: red;
2. Ячейке задано свойство border-color: red green;
3. Ячейке задано свойство border-color: red green red; (Результат аналогичен предыдущему)
4. Ячейке задано свойство border-color: red green blue;
5. Ячейке задано свойство border-color: red green blue green; (Результат аналогичен предыдущему)
6. Ячейке задано свойство border-color: green blue blue green; (Оформление углов ┏ и ┛)
7. Ячейке задано свойство border-color:blue blue khaki khaki; (Оформление углов ┓ и ┗)
8. Ячейке задано свойство border-color: red blue blue blue; («Коробка с крышкой»)
9. Ячейке задано свойство border-color: blue blue blue red; («Клетка с дверцей»)
10. Ячейке задано свойство border-color: green blue green orange; (Аналог 3-х аргументов для верхней и нижней границ)
11. Ячейке задано свойство 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

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---