Border


назад вперед

Свойство CSS border

Свойство CSS border позволяет вам оформлять стиль и цвет границы вокруг элемента.


Свойство border-style

Свойство border-style определяет тип рамки вокруг элемента.

Совет: ни одно свойство границы не будет работать, если не указано свойство border-style!

Значения border-style:

none: без рамки

dotted: рамка из точек

dashed: пунктирная рамка

solid: сплошная рамка

double: двойная рамка. Общая ширина двух границ равна значению border-width (ширина рамки)

groove: трехмерная рамка

ridge: трехмерная рамка

inset: трехмерная рамка

outset: трехмерная рамка


Ширина рамки

Свойство border-width задает ширину рамки.

Ширину рамки можно задать в пикселях, либо используя три фиксированных значения: thin (тонкая), medium (средняя) или thick (широкая).

Заметка: свойство border-width не оказывает никакого эффекта на рамку элемента, если не указано свойство border-style.

Пример

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Посмотреть


Цвет рамки (границы)

Свойство border-color используется для настройки цвета рамки элемента. Цвет можно указать с помощью:

Кроме того, можно задать цвет границы прозрачным ("transparent").

Заметка: свойство "border-color" не оказывает эффекта на рамку элемента, если не указано свойство "border-style".


Разные цвета границ

С помощью CSS вы можете задать каждой границе (верхней, нижней, правой, левой) свой стиль:

Пример

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Посмотреть

Свойство border-style может иметь от одного, до четырех значений.

Указанные значения точно так же применяются к свойствам border-color и border-width.

Совет: чтобы запомнить, как применяются значения свойства, надо запомнить простое правило — значения свойства применяются по часовой стрелке, начиная с верхней границы. Вертикальные границы имеют приоритет перед горизонтальными.


Краткая запись свойств рамки

Как вы видели в примерах, существует много характеристик границ элемента, которые вы можете настроить с помощью CSS.

Для уменьшения лишнего кода, свойства границы можно записать одной записью.

Краткая запись свойств границы называется "border":

Пример

border:5px solid red;

Посмотреть

При использовании свойства border соблюдайте следующий порядок свойств:

Если вы не указали значение какого-либо свойства, будет подставлено значение по умолчанию (свойство border-style обязательно).


Все свойства границ — справка CSS

Число в столбце "CSS" указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство Описание Значения CSS
border Все свойства границы одной записью border-width
border-style
border-color
1
border-bottom Все свойства нижней границы одной записью border-bottom-width
border-bottom-style
border-bottom-color
1
border-bottom-color Цвет нижней границы border-color 2
border-bottom-style Стиль нижней границы border-style 2
border-bottom-width Ширина нижней границы border-width 1
border-color Цвет всех границ название-цвета
hex-код
rgb- код
transparent
inherit
1
border-left Все свойства левой границы border-left-width
border-left-style
border-left-color
1
border-left-color Цвет левой границы border-color 2
border-left-style Стиль левой границы border-style 2
border-left-width Ширина левой границы border-width 1
border-right Все свойства правой границы border-right-width
border-right-style
border-right-color
1
border-right-color Цвет правой границы border-color 2
border-right-style Стиль правой границы border-style 2
border-right-width Ширина правой границы border-width 1
border-style Стиль всех границ none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
1
border-top Все свойства верхней границы border-top-width
border-top-style
border-top-color
1
border-top-color Цвет верхней границы border-color 2
border-top-style Стиль верхней границы border-style 2
border-top-width Ширина верхней границы border-width 1
border-width Ширина всех границ thin
medium
thick
ширина
inherit
1


Поисковой портал Jooble - позволяет в один клик найти любую интересующую вакансию по всему интернету.

Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта