ВЕБУЧЕБНИКИ

Свойства Границы

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

Стиль Границы

Свойство border-style указывает, какой тип границы отображать.

Никакое из свойств границы не возымеет эффект до тех пор, пока свойство border-style не установлено!

Значения border-style

none: Отсутствие границы

Ширина Границы

Свойство border-width используется, чтобы установить ширину границы.

Ширина устанавливается в пикселях, или с помощью одного из трех предопределенных значений: thin (тонкая), medium (средняя), or 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 значение, например "rgb(255,0,0)"

• Hex - укажите шестнадцатеричное значение, например "#ff0000"

Также вы можете установить цвет границы в "transparent".

Замечание: Свойство "border-color" не работает, если используется в одиночку. Укажите сначала свойство "border-style", чтобы установить границы.

Пример:

p.one

{

border-style:solid;

border-color:red;

}

p.two

{

border-style:solid;

border-color:#98bf21;

}

нажмите чтобы увидеть результат 

Граница - индивидуальное оформление сторон

В CSS можно указать различные границы для разных сторон:

Пример:

p

{

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

нажмите чтобы увидеть результат 

Пример выше можно переделать, используя одно свойство:

Пример:

border-style:dotted solid;

нажмите чтобы увидеть результат 

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

border-style:dotted solid double dashed;

• верхняя граница - из точек

• правая граница - сплошная

• нижняя граница - двойная

• левая граница - пунктирная

border-style:dotted solid double;

• верхняя граница - из точек

• правая и левая границы - сплошные

• нижняя граница - двойная

border-style:dotted solid;

• верхняя и нижняя границы - из точек

• правая и левая границы - сплошные

border-style:dotted;

• все четыре границы - из точек

Свойство border-style используется в примере выше. Однако, это также работает и со свойствами border-width и border-color.

Граница - Стенографическое (сокращенное) свойство

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

Чтобы укоротить код, можно указать все свойства границы в одном свойстве. Оно называется стенографическим (или сокращенным) свойством.

Стенографическое свойство для свойств границы - "border":

Пример:

border:5px solid red;

нажмите чтобы увидеть результат 

При использовании свойства border, порядок значений таков:

• border-width

• border-style

• border-color

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