Обзор свойств CSS.Рамка (граница, бордюр).
Рамка (граница, бордюр).
Влияют на все четыре рамки:
Краткий вариант записи для свойств border-width, border-style и border-color. Влияет на все четыре границы элемента.
Устанавливает цвет рамки со всех сторон элемента.
Устанавливает толщину рамки со всех сторон элемента.
Определяет стиль оформления рамки вокруг элемента.
Указывает ячейкам таблицы, иметь ли собственный бордюр или общий с соседней ячейкой.
Устанавливает расстояние между ячейками таблицы.
Верхняя рамка:
Краткий вариант доступа к свойствам border-top-width, border-top-style и border-top-color.
Устанавливает цвет верхнего бордюра.
Устанавливает стиль линии верхнего бордюра.
Устанавливает ширину верхнего бордюра.
Нижняя рамка:
Краткий вариант доступа к свойствам border-bottom-width, border-bottom-style и border-bottom-color.
Устанавливает цвет нижнего бордюра.
Устанавливает стиль линии нижнего бордюра.
Устанавливает ширину нижнего бордюра.
Левая рамка:
Краткий вариант доступа к свойствам border-left-width, border-left-style и border-left-color.
Устанавливает цвет левого бордюра.
Устанавливает стиль линии левого бордюра.
Устанавливает ширину левого бордюра.
Правая рамка:
Краткий вариант доступа к свойствам border-right-style и border-right-color.
Устанавливает цвет правого бордюра.
Устанавливает стиль линии правого бордюра.
Влияют на все четыре рамки:
border
Свойство border - сокращённое свойство, управляет внешним видом рамки (бордюра) вокруг элемента, позволяя определить в одной строке сразу несколько атрибутов: цвет, стиль и ширину.По сути, border предлагает быстрый вариант указания свойств border-width, border-style и border-color.
Свойство оказывает влияние на все четыре стороны элемента одновременно.
Посмотрите на иллюстрацию:
Рамка обозначена зеленым. Посмотрим пристальнее на "анатомию" элемента:
Обратите внимание - она располагается между внутренними отступами (paddings) и внешним полями (margins).
Пример :
p {border: 2px dotted red}
Этот пример аналогичен следующей записи:
p {
border-top: 2px dotted red;
border-bottom: 2px dotted red;
border-left: 2px dotted red;
border-right: 2px dotted red;
}
Возможные значения:
Значения свойств border-width, border-style и border-color разделенные пробелом, могут располагаться в любом порядке.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
border-color
Свойство border-color устанавливает цвет рамки (бордюра, границы) вокруг элемента, оказывая влияние на все четыре её стороны.
В примере выше мы имеем рамку зеленого цвета.
Пример :
p {border-color: yellow #F45581 black}
a {border-color: red blue}
Возможные значения:
...список...
Один, два, три или четыре цвета, разделенных пробелом, например, #ff6699 black. Цвета указываются одним из стандартных способов. Кроме того, можно использовать значение transparent (прозрачный). Если указано одно значение, оно применится ко всей рамке. Если двазначения - верхней и нижней рамкам будет присвоено первое, левой и правой - второе. Если тризначения - верхней рамке будет присвоено первое, левой и правой - второе, нижней - третье. Если указать четыре значения, они применятся подряд к верхней, правой, нижней и левой рамкам соответственно.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: Зависит от web-браузера. Обычно совпадает с цветом, заданным свойством color.
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
border-width
Свойство border-width управляет толщиной рамки (границы, бордюра) вокруг элемента, оказывая влияние на все четыре её стороны.
Пример :
code {border-width: 4px 1px}
p {border-width: thin thick}
h1 {border-width: 3px 2px 4px 1px}
Возможные значения:
thin
Тонкая рамка (обычно 2 пиксела).
medium
Рамка средней ширины (обычно 4 пиксела).
thick
Толстая рамка (обычно 6 пикселов).
Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - ширина не может иметь отрицательное значение.
...список...
Одно, два, три или четыре вышеприведенных значения, разделенных пробелом, например 1px thin 2px. Если указано одно значение, оно применится ко всей рамке. Если два значения - верхней и нижней рамкам будет присвоено первое, левой и правой - второе. Если три значения - верхней рамке будет присвоено первое, левой и правой - второе, нижней - третье. Если указатьчетыре значения, они применятся подряд к верхней, правой, нижней и левой рамкам соответственно.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: medium
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
border-style
Свойство border-style управляет стилем рамки (бордюра, границы) вокруг элемента, оказывая влияние на все четыре её стороны.
Пример :
h1 {border-style: none}
p {border-style: solid dotted}
code {border-style: solid}
Возможные значения:
solid
Обычная сплошная рамка.
none
Рамка отсутствует, её ширина равна нулю.
hidden
Результат тот же, что и при border-style: none - рамка не отображается.
dotted
Рамка в виде последовательности точек (мелкий пунктир).
dashed
Пунктирная рамка.
double
Двойная линия.
groove
"Вдавленная" рамка, с эффектом объёма.
ridge
"Выпуклая" рамка, с эффектом объёма.
inset
Вариант "вдавленной" рамки, с эффектом объёма.
outset
Вариант "выпуклой" рамки, с эффектом объёма.
...список...
Одно, два, три или четыре вышеприведенных значения, разделенных пробелом, например solid dashed. Если указано одно значение, оно применится ко всей рамке. Если два значения - верхней и нижней рамкам будет присвоено первое, левой и правой - второе. Если три значения - верхней рамке будет присвоено первое, левой и правой - второе, нижней - третье. Если указать четырезначения, они применятся подряд к верхней, правой, нижней и левой рамкам соответственно.
inherit
Заимствует значение свойства у родительского элемента.Характеристики
Характеристики.
Значение по умолчанию: none
Применяется: Ко всем элементам
Наследуется: Нет
border-collapse
Свойство border-collapse устанавливает способ отображения рамки (бордюра, границы) вокруг ячейки таблицы. Оно определяет, должна ли ячейка иметь общую рамку с соседними ячейками, или свою собственную.
Иллюстрация ниже показывает две таблицы. В левой таблице включен режим border-collapse:collapse, в правой - border-collapse:separate.
Пример :
table {border-collapse: collapse}
Возможные значения:
collapse
Использовать общую рамку для ячеек таблицы.
separate
Каждая ячейка таблицы имеет собственную рамку.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: none
Применяется: table thead tbody tfoot colgroup col tr th td
Наследуется: Да
См. также.
border-spacing
Свойство border-spacing устанавливает расстояние между ячейками таблицы.
Свойство применимо только в том случае, когда каждая ячейка имеет собственную рамку (бордюр, границу). При border-collapse: collapse данное свойство не работает.
Посмотрите на иллюстрацию. В левой таблице border-spacing: 0px, в правой - border-spacing: 6px.
Пример :
table {border-spacing: 6px}
Возможные значения:
Точное расстояние до соседних ячеек. Величина задается одним из принятых в CSS способов задания размеров.
Расстояние до соседних ячеек - по горизонтали и вертикали соответственно.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: none
Применяется: table thead tbody tfoot colgroup col tr th td
Наследуется: Да
См. также.
Верхняя рамка:
border-top
Свойство border-top управляет внешним видом верхней стороны рамки вокруг элемента.По сути, border-top предлагает сокращенный вариант записи для свойств border-top-width,border-top-style и border-top-color - цвет, стиль и ширину можно определить в одной строке.
Пример :
h1 {
background-color:#eeeeee;
border:solid 1px black;
border-top: dashed 3px blue;
}
Результат:
Этот пример аналогичен следующей записи:
h1 {
background-color:#eeeeee;
border:solid 1px black;
border-top-style: dashed;
border-top-color: blue;
border-top-width: 3px;
}
Возможные значения:
...список...
Значения свойств border-top-width, border-top-style и border-top-color разделенные пробелом; могут располагаться в любом порядке.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-top-width
-
border-top-style
-
border-top-color
border-top-color
Устанавливает цвет верхней стороны рамки (бордюра, границы) над элементом.
Пример :
h1{
background-color:#eeeeee;
border-top-width:2px;
border-top-style:solid;
border-top-color:red;
}
Результат:
Возможные значения:
цвет
Цвет указывается одним из стандартных способов.
transparent
Прозрачный цвет рамки.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: Зависит от web-браузера. Обычно совпадает с цветом, заданным свойством color
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-color
-
border-bottom-color
-
border-left-color
-
border-right-color
border-top-style
Управляет стилем верхней стороны рамки (бордюра, границы) вокруг элемента.
Пример :
h1{
background-color:#eeeeee;
border:solid 2px red; /* вся рамка - красная сплошная */
border-top-style: dotted; /* и только верхняя граница пунктиром */
}
В результате мы переопределили стиль верхней границы на пунктирный:
Возможные значения:
solid
Обычная сплошная рамка.
none
Рамка отсутствует, её ширина равна нулю.
hidden
Результат тот же, что и при border-top-style: none - рамка не отображается.
dotted
Рамка в виде последовательности точек (мелкий пунктир).
dashed
Пунктирная рамка.
double
Двойная линия.
groove
"Вдавленная" рамка, с эффектом объёма.
ridge
"Выпуклая" рамка, с эффектом объёма.
inset
Вариант "вдавленной" рамки, с эффектом объёма
.outset
Вариант "выпуклой" рамки, с эффектом объёма.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: none
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-style
-
border-bottom-style
-
border-left-style
-
border-right-style
border-top-width
Управляет толщиной верхней рамки (границы, бордюра) над элементом.
Пример :
p {
border-top-style:solid;
border-top-width:2px;
}
Результат:
Возможные значения:
ширина
Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение.
thin
Тонкая рамка (обычно 2 пиксела).
medium
Рамка средней ширины (обычно 4 пиксела).
thick
Толстая рамка (обычно 6 пикселов).
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: medium
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-width
-
border-bottom-width
-
border-left-width
-
border-right-width
Нижняя рамка:
border-bottom
Свойство border-bottom управляет внешним видом нижней стороны рамки вокруг элемента.По сути, border-bottom предлагает сокращенный вариант записи для свойств border-bottom-width, border-bottom-style и border-bottom-color - цвет, стиль и ширину можно определить в одной строке.
Пример :
h1{
background-color:#eeeeee;
border:solid 1px black;
border-bottom: dashed 3px blue;
}
Результат:
Возможные значения:
...список...
Значения свойств border-bottom-width, border-bottom-style и border-bottom-colorразделенные пробелом; могут располагаться в любом порядке.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-bottom-width
-
border-bottom-style
-
border-bottom-color
border-bottom-color
Устанавливает цвет нижней стороны рамки (бордюра, границы) вокруг элемента.
Пример :
h1{
background-color:#eeeeee;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:red;
}
Результат:
Возможные значения:
цвет
Цвет указывается одним из стандартных способов.
transparent
Прозрачный цвет рамки.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: Зависит от web-браузера. Обычно совпадает с цветом, заданным свойством color
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-color
-
border-top-color
-
border-left-color
-
border-right-color
border-bottom-style
Управляет стилем нижней стороны рамки (бордюра, границы) вокруг элемента.
Пример :
h1{
background-color:#eeeeee;
border:solid 2px red; /* вся рамка - красная сплошная */
border-bottom-style: dotted; /* и только нижняя граница пунктиром */
}
В результате мы переопределили стиль нижней границы на пунктирный:
Возможные значения:
solid
Обычная сплошная рамка.
none
Рамка отсутствует, её ширина равна нулю.
hidden
Результат тот же, что и при border-bottom-style: none - рамка не отображается.
dotted
Рамка в виде последовательности точек (мелкий пунктир).
dashed
Пунктирная рамка.
double
Двойная линия.
groove
"Вдавленная" рамка, с эффектом объёма.
ridge
"Выпуклая" рамка, с эффектом объёма.
inset
Вариант "вдавленной" рамки, с эффектом объёма.
outset
Вариант "выпуклой" рамки, с эффектом объёма.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: none
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-style
-
border-top-style
-
border-left-style
-
border-right-style
border-bottom-width
Управляет толщиной нижней стороны рамки (бордюра, границы) вокруг элемента.
Пример :
p {
border-bottom-style:solid;
border-bottom-width:2px;
}
Результат:
Возможные значения:
ширина
Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение.
thin
Тонкая рамка (обычно 2 пиксела).
medium
Рамка средней ширины (обычно 4 пиксела).
thick
Толстая рамка (обычно 6 пикселов).
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: medium
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-width
-
border-top-width
-
border-left-width
-
border-right-width
Левая рамка:
border-left
Свойство border-left управляет внешним видом левой стороны рамки вокруг элемента.По сути, border-left предлагает сокращенный вариант записи для свойств border-left-width,border-left-style и border-left-color - цвет, стиль и ширину можно определить в одной строке.
Пример :
h1 {
background-color:#eeeeee;
border:solid 1px black;
border-left: dotted 3px blue;
}
Результат:
Этот пример аналогичен следующей записи:
h1 {
background-color:#eeeeee;
border:solid 1px black;
border-left-style: dotted;
border-left-color: blue;
border-left-width: 3px;
}
Возможные значения:
...список...
Значения свойств border-left-width, border-left-style и border-left-color разделенные пробелом; могут располагаться в любом порядке.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-left-width
-
border-left-style
-
border-left-color
border-left-color
Устанавливает цвет рамки (бордюра, границы) слева от элемента.
Пример :
h1{
background-color:#eeeeee;
border-left-width:2px;
border-left-style:solid;
border-left-color:red;
}
Результат:
Возможные значения:
цвет
Цвет указывается одним из стандартных способов.
transparent
Прозрачный цвет рамки.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: Зависит от web-браузера
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-color
-
border-top-color
-
border-bottom-color
-
border-right-color
border-left-style
Управляет стилем рамки (бордюра, границы) слева от элемента.
Пример :
h1{
background-color:#eeeeee;
border:solid 2px red; /* вся рамка - красная сплошная */
border-left-style: dotted; /* и только левая граница пунктиром */
}
В результате мы переопределили стиль левой границы на пунктирный:
Возможные значения:
solid
Обычная сплошная рамка.
none
Рамка отсутствует, её ширина равна нулю.
hidden
Результат тот же, что и при border-left-style: none - рамка не отображается.
dotted
Рамка в виде последовательности точек (мелкий пунктир).
dashed
Пунктирная рамка.
double
Двойная линия.
groove
"Вдавленная" рамка, с эффектом объёма.
ridge
"Выпуклая" рамка, с эффектом объёма.
inset
Вариант "вдавленной" рамки, с эффектом объёма.
outset
Вариант "выпуклой" рамки, с эффектом объёма.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: none
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-style
-
border-bottom-style
-
border-top-style
-
border-right-style
border-left-width
Управляет толщиной рамки (границы, бордюра) слева от элемента.
Пример :
p {
border-left-style: solid;
border-left-color: red;
border-left-width: 2px;
}
Результат:
Возможные значения:
ширина
Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение.
thin
Тонкая рамка (обычно 2 пиксела).
medium
Рамка средней ширины (обычно 4 пиксела).
thick
Толстая рамка (обычно 6 пикселов).
inherit
Заимствует значение свойства у родительского элемента.
Характеристики:
Значение по умолчанию: medium
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-width
-
border-top-width
-
border-bottom-width
-
border-right-width
Правая рамка:
border-right
Свойство border-right управляет внешним видом правой стороны рамки вокруг элемента.По сути, border-right предлагает сокращенный вариант записи для свойств border-right-width, border-right-style и border-right-color - цвет, стиль и ширину можно определить в одной строке.
Пример :
h1 {
background-color:#eeeeee;
border:solid 1px black;
border-right: dotted 3px blue;
}
Результат:
Этот пример аналогичен следующей записи:
h1 {
background-color:#eeeeee;
border:solid 1px black;
border-right-style: dotted;
border-right-color: blue;
border-right-width: 3px;
}
Возможные значения:
...список...
Значения свойств border-right-width, border-right-style и border-right-color разделенные пробелом; могут располагаться в любом порядке.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики:
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-right-width
-
border-right-style
-
border-right-color
border-right-color
Устанавливает цвет рамки (бордюра, границы) справа от элемента.
Пример :
h1{
background-color:#eeeeee;
border-right-width:2px;
border-right-style:solid;
border-right-color:red;
}
Результат:
Возможные значения:
цвет
Цвет указывается одним из стандартных способов.
transparent
Прозрачный цвет рамки.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики:
Значение по умолчанию: Зависит от web-браузера. Обычно совпадает с цветом, заданным свойством color
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-color
-
border-top-color
-
border-bottom-color
-
border-left-color
border-right-style
Управляет стилем рамки (бордюра, границы) справа от элемента.
Пример :
h1{
background-color:#eeeeee;
border:solid 2px red; /* вся рамка - красная сплошная */
border-right-style: dotted; /* и только правая граница пунктиром */
}
В результате мы переопределили стиль правой границы на пунктирный:
Возможные значения:
solid
Обычная сплошная рамка.
none
Рамка отсутствует, её ширина равна нулю.
hidden
Результат тот же, что и при border-right-style: none - рамка не отображается.
dotted
Рамка в виде последовательности точек (мелкий пунктир).
dashed
Пунктирная рамка.
double
Двойная линия.
groove
"Вдавленная" рамка, с эффектом объёма.
ridge
"Выпуклая" рамка, с эффектом объёма.
inset
Вариант "вдавленной" рамки, с эффектом объёма.
outset
Вариант "выпуклой" рамки, с эффектом объёма.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики:
Значение по умолчанию: none
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-style
-
border-bottom-style
-
border-top-style
-
border-left-style
