Рамки (border)

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

Свойства:

border-width - определяет ширину рамки.

Значения устанавливаются в пикселях.

Пример:

border-width: 3px;  //  Ширина рамки 3 пикселя

В одной строке также можно установить ширину для всех четырех сторон рамки. Первый размер указывается для верхней стороны, потом по часовой стрелке.

Пример:

border-width: 1px 2px 3px 4px;- в данном случае ширина сторон будет такая:

Верхняя - 1 пиксель.

Правая - 2 пикселя.

Нижняя - 3 пикселя.

Левая - 4 пикселя.

border-style - определяет стиль рамки.

Этот атрибут должен быть указан обязательно, иначе рамка не будет отображена в странице.

Примеры:

border-style: solid;  //  Сплошная рамка

border-style: double;  //  Двойная сплошная линия

border-style: groove;  //  Выдавленная рамка

border-style: ridge;  //  Поднятая рамка

border-style: inset;  //  Выдавленная область внутри рамки

border-style: outset;  //  Поднятая область внутри рамки

border-style: dotted;  //  Рамка в виде мелкого пунктира

border-style: dashed;  //  Рамка в виде крупного пунктира

border-color - определяет цвет рамки.

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

Примеры:

border-color: #FFOOOO;  //  Один цвет для всей рамки

border-color: #FFOOOO  #EE55AA  #OOOOOO  #FFFFFF;  //  для каждой рамки определенный цвет