Параметр 'border'
Данный параметр позволяет определить все свойства четырех сторон границы в одном объявлении. Но это свойство не может определить различные значения для каждой стороны границы, как, например, "margin" и "padding".
Наследование: нет.
Может принимать следующие значения:
| border-width | Задает свойства для четырех сторон границы |
| border-style | |
| border-color |
Примеры:
h1 { border: medium solid #FFFF00 }
h2 { border: dotted green }
Параметр 'border-bottom'
Этот параметр позволяет определить все свойства нижней стороны границы в одном объявлении.
Наследование: нет.
Возможные значения:
| border-bottom-width | Задает свойства для нижней стороны границы |
| border-style | |
| border-color |
Примеры:
span { border-bottom: thick solid #800080 }
li { border-bottom: dotted #800000 }
Параметр 'border-bottom-color'
Данный параметр задает цвет нижней границы элемента.
Наследование: нет.
Может принимать следующие значения:
| Color | Значение для цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
Примеры:
p { border-bottom-color: rgb(20,200,250) }
span { border-bottom-color: blue }
Параметр 'border-bottom-style'
Этот параметр задает стиль нижней границы элемента.
Наследование: нет.
Может принимать следующие значения:
| None | Определяет отсутствие границы |
| Hidden | То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted | Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed | Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid | Определяет сплошную границу |
| double | Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove | Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge | Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset | Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset | Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Пример:
p { border-bottom-style: dotted }
Параметр 'border-bottom-width'
Данный параметр задает толщину нижней границы элемента.
Наследование: нет.
Может принимать следующие значения:
| thin | Определяет тонкую нижнюю границу |
| medium | Определяет нижнюю границу средней толщины |
| thick | Определяет толстую нижнюю границу |
| length | Позволяет определить толщину нижней границы |
Примеры:
p { border-bottom-width: 1px }
p { border-bottom-width: thick }
Параметр 'border-color'
Данный параметр задает цвет четырех сторон границы. Допускается определение от одного до четырех цветов. Необходимо объявлять свойство border-style перед свойством border-color, т.к. элемент должен иметь границу, прежде чем для нее будет задан цвет.
Наследование: нет.
Возможные значения:
| Color | Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
| Transparent | Граница является прозрачной |
Примеры:
p {border-color: blue} все четыре стороны границы будут синие.
p {border-color: blue yellow} верхняя и нижняя стороны границы будут синие, левая и правая стороны границы будут желтые.
p {border-color: blue yellow green} верхняя стороны граница будет синей, левая и правая стороны границы будут желтые, нижняя сторона границы будет зеленая.
p {border-color: blue yellow green red} верхняя сторона границы будет синей, правая сторона границы будет желтой, нижняя сторона границы будет зеленой, левая сторона границы будет красной.
Параметр 'border-left'
Данный параметр позволяет определить все свойства левой стороны границы в одном объявлении.
Наследование: нет.
Может принимать следующие значения:
| border-left-width | Задает свойства левой стороны границы |
| border-style | |
| border-color |
Примеры:
p { border-left: medium dashed green }
p { border-left: thin dotted #FF00FF }
Параметр 'border-left-color'
Данный параметр задает цвет левой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| Color | Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
Примеры:
h1 { border-left-color: green }
h2 { border-left-color: #00FF00 }
Параметр 'border-left-style'
Данный параметр задает стиль левой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| None | Определяет отсутствие границы |
| Hidden | То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted | Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed | Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid | Определяет сплошную границу |
| double | Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove | Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge | Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset | Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset | Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Пример:
p { border-left-style: dotted }
Параметр 'border-left-width'
Данный параметр задает толщину левой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| thin | Определяет тонкую левую сторону границы |
| medium | Определяет левую сторону границы средней толщины |
| thick | Определяет толстую левую сторону границы |
| length | Позволяет определить толщину левой стороны границы |
Примеры:
p { border-left-width: 7px }
p { border-left-width: thick }
Параметр 'border-right'
Этот параметр используется для определения всех свойств правой стороны границы в одном объявлении.
Наследование: нет.
Может принимать следующие значения:
| border-right-width | Задает свойства правой стороны границы |
| border-style | |
| border-color |
Примеры:
h1 { border-right: medium dotted #FFFF00 }
h2 { border-right: thin dashed green }
Параметр 'border-right-color'
Данный параметр задает цвет правой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| color | Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
Примеры:
p { border-right-color: rgb(250,200,250) }
p { border-right-color: blue }
Параметр 'border-right-style'
Данный параметр задает стиль правой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| None | Определяет отсутствие границы |
| Hidden | То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted | Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed | Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid | Определяет сплошную границу |
| double | Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove | Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge | Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset | Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset | Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Пример:
p { border-right-style: dashed }
Параметр 'border-right-width'
Данный параметр задает толщину правой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| thin | Определяет тонкую правую сторону границы |
| medium | Определяет правую сторону границы средней толщины |
| thick | Определяет толстую правую сторону границы |
| length | Позволяет определить толщину правой стороны границы |
Примеры:
h1 { border-right-width: 2cm }
h2 { border-right-width: medium }
Параметр 'border-style'
Этот параметр задает стиль четырех сторон границы. Позволяет определить от одного до четырех стилей.
Наследование: нет.
Может принимать следующие значения:
| None | Определяет отсутствие границы |
| Hidden | То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted | Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed | Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid | Определяет сплошную границу |
| double | Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove | Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge | Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset | Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset | Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Примеры:
p {border-style: dashed} все четыре стороны границы будут штрих-пунктирными.
p {border-style: solid double} верхняя и нижняя стороны границы будут сплошными, левая и правая сторона граница будут двойными.
p {border-style: solid double dotted} верхняя сторона границы будет сплошной, левая и правая сторона границы будут двойными, нижняя сторона границы будет пунктирной.
p {border-style: dashed double dotted solid} верхняя сторона граница будет штрих-пунктирной, правая сторона границы будет двойной, нижняя сторона границы будет пунктирной, левая сторона границы будет сплошной.
Параметр 'border-top'
Данный параметр определяет все свойства верхней стороны границы в одном объявлении.
Наследование: нет.
Может принимать следующие значения:
| border-top-width | Задает свойства верхней стороны границы |
| border-style | |
| border-color |
Примеры:
p { border-top: thick dashed green }
p { border-top: dotted #FF0000 }
Параметр 'border-top-color'
Этот параметр задает цвет верхней стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| color | Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
Примеры:
h1 { border-top-color: blue }
h2 { border-top-color: rgb(200,10,250) }
Параметр 'border-top-style'
Параметр задает стиль верхней стороны границы элемента.
Наследование: нет.
Возможные значения:
| None | Определяет отсутствие границы |
| Hidden | То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted | Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed | Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid | Определяет сплошную границу |
| double | Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove | Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge | Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset | Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset | Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Примеры:
p { border-top-style: dotted }
Параметр 'border-top-width'
Данный параметр задает толщину верхней стороны границы элемента.
Наследование: нет.
Возможные значения:
| thin | Определяет тонкую верхнюю сторону границы |
| medium | Определяет верхнюю сторону границы средней толщины |
| thick | Определяет толстую верхнюю сторону границы |
| length | Позволяет определить толщину верхней стороны границы |
Примеры:
p { border-top-width: medium }
p { border-top-width: 1cm }
Параметр 'border-width'
Данный параметр определяет в одном объявлении толщину четырех сторон границы и может иметь от одного до четырех значений.
Наследование: нет.
Возможные значения:
| thin | Определяет тонкую границу |
| medium | Определяет границы средней толщины |
| thick | Определяет толстую границу |
| length | Позволяет определить толщину границ |
Примеры:
p {border-width: thick} все четыре стороны границы будут толстыми.
p {border-width: thick thin} верхняя и нижняя стороны границы будут толстыми, левая и правая сторона границы будут тонкими.
p {border-width: medium thick thin} верхняя сторона границы будет иметь среднее значение, левая и правая стороны границы будут толстыми, нижняя сторона границы будет тонкой.
p {border-width: thick thin thin medium} верхняя сторона границы будет толстой, правая сторона границы будет тонкой, нижняя сторона границы будет тонкой, левая сторона границы будет иметь среднее значение.
Параметры границы в CSS
Параметры границы в CSS позволяют определить стиль и цвет рамки вокруг элемента. Если в HTML для создания границ вокруг текста использовались таблицы, то в CSS можно создавать границы, которые применимы к любому элементу. Кроме того, возможности параметров границ в CSS расширены.
Данные параметры поддерживают следующие браузеры: Internet Explorer, Firefox, Netscape.
| border | Параметр для задания свойств всех четырех сторон границы в одном объявлении | border-width | 4 | 1 | 4 | 1 |
| border-style | ||||||
| border-color | ||||||
| border-bottom | Параметр для задания всех свойств нижней стороны границы в одном объявлении | border-bottom-width | 4 | 1 | 6 | 1 |
| border-style | ||||||
| border-color | ||||||
| border-bottom-color | Задает цвет нижней стороны границы | border-color | 4 | 1 | 6 | 2 |
| border-bottom-style | Задает стиль нижней стороны границы | border-style | 4 | 1 | 6 | 2 |
| border-bottom-width | Задает толщину нижней стороны границы | thin | 4 | 1 | 4 | 1 |
| medium | ||||||
| thick | ||||||
| length | ||||||
| border-color | Задает цвета четырех сторон границы, может иметь от одного до четырех значений | color | 4 | 1 | 6 | 1 |
| border-left | Параметр для задания всех свойств левой стороны границы в одном объявлении | border-left-width | 4 | 1 | 6 | 1 |
| border-style | ||||||
| border-color | ||||||
| border-left-color | Задает цвет левой стороны границы | border-color | 4 | 1 | 6 | 2 |
| border-left-style | Задает стиль левой стороны границы | border-style | 4 | 1 | 6 | 2 |
| border-left-width | Задает толщину левой стороны границы | thin | 4 | 1 | 4 | 1 |
| medium | ||||||
| thick | ||||||
| length | ||||||
| border-right | Параметр для задания всех свойств правой стороны границы в одном объявлении | border-right-width | 4 | 1 | 6 | 1 |
| border-style | ||||||
| border-color | ||||||
| border-right-color | Задает цвет правой стороны границы | border-color | 4 | 1 | 6 | 2 |
| border-right-style | Задает стиль правой стороны границы | border-style | 4 | 1 | 6 | 2 |
| border-right-width | Задает толщину правой стороны границы | thin | 4 | 1 | 4 | 1 |
| medium | ||||||
| thick | ||||||
| length | ||||||
| border-style | Задает стили четырех сторон границы, может иметь от одного до четырех стилей | none | 4 | 1 | 6 | 1 |
| hidden | ||||||
| dotted | ||||||
| dashed | ||||||
| solid | ||||||
| double | ||||||
| groove | ||||||
| ridge | ||||||
| inset | ||||||
| outset | ||||||
| border-top | Параметр для задания всех свойств верхней стороны границы в одном объявлении | border-top-width | 4 | 1 | 6 | 1 |
| border-style | ||||||
| border-color | ||||||
| border-top-color | Задает цвет верхней стороны границы | border-color | 4 | 1 | 6 | 2 |
| border-top-style | Задает стиль верхней стороны границы | border-style | 4 | 1 | 6 | 2 |
| border-top-width | Задает толщину верхней стороны границы | thin | 4 | 1 | 4 | 1 |
| medium | ||||||
| thick | ||||||
| length | ||||||
| border-width | Параметр для задания толщин четырех сторон границы в одном объявлении, может иметь от одного до четырех значений | thin | 4 | 1 | 4 | 1 |
| medium | ||||||
| thick | ||||||
| length |
