Свойства Border и Outline
|
Свойство |
Описание |
Значения |
||||||||||
|
border |
сокращённое свойство, управляет внешним видом рамки (бордюра) вокруг элемента, позволяя определить в одной строке сразу несколько атрибутов: цвет, стиль и ширину. |
Значения свойств border-width, border-style и border-color разделенные пробелом, могут располагаться в любом порядке. |
||||||||||
|
border-bottom |
Управляет внешним видом нижней стороны рамки вокруг элемента. Предлагает сокращенный вариант записи для свойств border-bottom-width, border-bottom-style и border-bottom-color - цвет, стиль и ширину можно определить в одной строке. |
Значения свойств border-bottom-width, border-bottom-style и border-bottom-color разделенные пробелом; могут располагаться в любом порядке. |
||||||||||
|
border-bottom-color |
Устанавливает цвет нижней стороны рамки вокруг элемента |
цвет Цвет указывается одним из стандартных способов. transparent Прозрачный цвет рамки. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-bottom-style |
Управляет стилем нижней стороны рамки вокруг элемента |
solid Обычная сплошная рамка. none Рамка отсутствует, её ширина равна нулю. hidden Результат тот же, что и при border-bottom-style: none - рамка не отображается. dotted Рамка в виде последовательности точек (мелкий пунктир). dashed Пунктирная рамка. double Двойная линия. groove "Вдавленная" рамка, с эффектом объёма. ridge "Выпуклая" рамка, с эффектом объёма. inset Вариант "вдавленной" рамки, с эффектом объёма. outset Вариант "выпуклой" рамки, с эффектом объёма. inherit Заимствует значение свойства у родительского элемента.
|
||||||||||
|
border-bottom-width |
Управляет толщиной нижней стороны рамки вокруг элемента |
ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение. thin Тонкая рамка (обычно 2 пиксела). medium Рамка средней ширины (обычно 4 пиксела). thick Толстая рамка (обычно 6 пикселов). inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-color |
Устанавливает цвет рамки вокруг элемента, оказывая влияние на все четыре её стороны. |
transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя. Цвет Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Результат зависит от количества и указан в табл.
|
||||||||||
|
border-left |
Управляет внешним видом левой стороны рамки вокруг элемента. По сути, border-left предлагает сокращенный вариант записи для свойств border-left-width, border-left-style и border-left-color - цвет, стиль и ширину можно определить в одной строке. |
Значения свойств border-left-width, border-left-style и border-left-color разделенные пробелом; могут располагаться в любом порядке. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-left-color |
Устанавливает цвет рамки слева от элемента. |
цвет Цвет указывается одним из стандартных способов. transparent Прозрачный цвет рамки. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-left-style |
Управляет стилем рамки слева от элемента. |
solid Обычная сплошная рамка. none Рамка отсутствует, её ширина равна нулю. hidden Результат тот же, что и при border-bottom-style: none - рамка не отображается. dotted Рамка в виде последовательности точек (мелкий пунктир). dashed Пунктирная рамка. double Двойная линия. groove "Вдавленная" рамка, с эффектом объёма. ridge "Выпуклая" рамка, с эффектом объёма. inset Вариант "вдавленной" рамки, с эффектом объёма. outset Вариант "выпуклой" рамки, с эффектом объёма. inherit Заимствует значение свойства у родительского элемента.
|
||||||||||
|
border-left-width |
Управляет толщиной рамки слева от элемента. |
ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение. thin Тонкая рамка (обычно 2 пиксела). medium Рамка средней ширины (обычно 4 пиксела). thick Толстая рамка (обычно 6 пикселов). inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-right |
Управляет внешним видом правой стороны рамки вокруг элемента. По сути, border-right предлагает сокращенный вариант записи для свойств border-right-width, border-right-style и border-right-color - цвет, стиль и ширину можно определить в одной строке. |
Значения свойств border-right-width, border-right-style и border-right-color разделенные пробелом; могут располагаться в любом порядке. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-right-color |
Устанавливает цвет рамки справа от элемента. |
цвет Цвет указывается одним из стандартных способов. transparent Прозрачный цвет рамки. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-right-style |
Управляет стилем рамки справа от элемента. |
solid Обычная сплошная рамка. none Рамка отсутствует, её ширина равна нулю. hidden Результат тот же, что и при border-bottom-style: none - рамка не отображается. dotted Рамка в виде последовательности точек (мелкий пунктир). dashed Пунктирная рамка. double Двойная линия. groove "Вдавленная" рамка, с эффектом объёма. ridge "Выпуклая" рамка, с эффектом объёма. inset Вариант "вдавленной" рамки, с эффектом объёма. outset Вариант "выпуклой" рамки, с эффектом объёма. inherit Заимствует значение свойства у родительского элемента.
|
||||||||||
|
border-right-width |
Управляет толщиной рамки справа от элемента. |
ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение. thin Тонкая рамка (обычно 2 пиксела). medium Рамка средней ширины (обычно 4 пиксела). thick Толстая рамка (обычно 6 пикселов). inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-style |
Свойство border-style управляет стилем рамки вокруг элемента, оказывая влияние на все четыре её стороны. |
solid Обычная сплошная рамка. none Рамка отсутствует, её ширина равна нулю. hidden Результат тот же, что и при border-bottom-style: none - рамка не отображается. dotted Рамка в виде последовательности точек (мелкий пунктир). dashed Пунктирная рамка. double Двойная линия. groove "Вдавленная" рамка, с эффектом объёма. ridge "Выпуклая" рамка, с эффектом объёма. inset Вариант "вдавленной" рамки, с эффектом объёма. outset Вариант "выпуклой" рамки, с эффектом объёма. inherit Заимствует значение свойства у родительского элемента.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл.
|
||||||||||
|
border-top |
Управляет внешним видом верхней стороны рамки вокруг элемента. По сути, border-top предлагает сокращенный вариант записи для свойств border-top-width, border-top-style и border-top-color - цвет, стиль и ширину можно определить в одной строке. |
Значения свойств border-top-width, border-top-style и border-top-color разделенные пробелом; могут располагаться в любом порядке.
inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-top-color |
Устанавливает цвет верхней стороны рамки над элементом. |
цвет Цвет указывается одним из стандартных способов. transparent Прозрачный цвет рамки. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-top-style |
Управляет стилем верхней стороны рамки вокруг элемента. |
solid Обычная сплошная рамка. none Рамка отсутствует, её ширина равна нулю. hidden Результат тот же, что и при border-bottom-style: none - рамка не отображается. dotted Рамка в виде последовательности точек (мелкий пунктир). dashed Пунктирная рамка. double Двойная линия. groove "Вдавленная" рамка, с эффектом объёма. ridge "Выпуклая" рамка, с эффектом объёма. inset Вариант "вдавленной" рамки, с эффектом объёма. outset Вариант "выпуклой" рамки, с эффектом объёма. inherit Заимствует значение свойства у родительского элемента.
|
||||||||||
|
border-top-width |
Управляет толщиной верхней рамки над элементом. |
ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение. thin Тонкая рамка (обычно 2 пиксела). medium Рамка средней ширины (обычно 4 пиксела). thick Толстая рамка (обычно 6 пикселов). inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-width |
управляет толщиной рамки вокруг элемента, оказывая влияние на все четыре её стороны. |
ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и приведен в табл
thin Тонкая рамка (обычно 2 пиксела). medium Рамка средней ширины (обычно 4 пиксела). thick Толстая рамка (обычно 6 пикселов). inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
outline |
Свойство outline это быстрый способ задать следующие параметры: outline-width , outline-style и/или outline-color . В отличие от свойства border , применение данного параметра не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента. Можно задать как один параметр, так и два или три одновременно. |
Значения свойств outline-width, outline-style и outline-color.
inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
outline-color |
определяет цвет контура вокруг элемента. В отличие от свойства border-color , применение данного параметра не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента |
цвет Цвет контура задается одним из стандартных способов. invert Цвет контура задается браузером автоматически так, чтобы он был максимально контрастным относительно фона. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
outline-style |
Свойство outline-style определяет вид контура вокруг элемента. В отличие от свойства border-style , применение данного параметра не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента |
none Значение по умолчанию. Контур не отображается. hidden Контур не отображается. dotted Контур отображается в виде точек.
dashed Контур отображается в виде коротких черточек.
solid Контур отображается в виде линии.
double Контур отображается в виде двух линий.
groove Контур отображается в виде вдавленной рамки.
ridge Данное значение отображает эффект, противоположный groove. Контур отображается в виде условно выступающей рамки.
inset Применение этого значение создает рамку с имитацией 3D эффекта, при котором осветляется нижний правый угол рамки. outset Применение этого значение создает рамку с имитацией 3D эффекта, при котором осветляется верхний левый угол рамки. inherit Заимствует значение свойства у родительского элемента.
|
||||||||||
|
outline-width |
Свойство outline-width определяет ширину контура вокруг элемента. В отличие от свойства border-width , применение данного параметра не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента |
ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. thin Тонкая рамка (обычно 2 пиксела). medium Рамка средней ширины (обычно 4 пиксела). thick Толстая рамка (обычно 6 пикселов). inherit Заимствует значение свойства у родительского элемента.
|