Веб-школа



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

Свойство 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 используется для настройки цвета рамки элемента. Цвет можно указать с помощью:

• названия — название цвета на английском, например, «red»
• код RGB, например, «rgb(255,0,0)»
• шестнадцатиричный код, например, «#ff0000»

Кроме того, можно задать цвет границы прозрачным («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-style:dotted solid double dashed;
  • верхняя граница из точек
  • правая граница сплошная
  • нижняя граница двойная
  • левая граница пунктирная

• border-style:dotted solid double;
  • верхняя граница из точек
  • левая и правая граница сплошные
  • нижняя граница двойная

• border-style:dotted solid;
  • верхняя и нижняя границы из точек
  • правая и левая граница сплошные

• border-style:dotted;

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

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

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

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

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

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

border:5px solid red;

Посмотреть

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

• border-width
• border-style
• border-color

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

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

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