Рамки элементов

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding. Рамка задаётся с помощью краткого свойства border. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина.

Синтаксис свойства border:

border: Ширина Тип Цвет;

Толщину (ширину) рамки нужно указывать в пикселях (px) или процентах (%). Цвет можно задать либо в формате RGB (Red Green Blue), либо в HTML HEX кода.

Если для свойства border задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю.

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

Типы линий и их названия:

Рассмотрим пример:

#primer { 
  border:2px solid #0085сс; /* установили линию толщиной 2 пикселя синего цвета  */
}

Чтобы установить одну-две-три рамки с определённой стороны, то можно указать так:

border-top - рамка сверху;
border-bottom - рамка снизу;
border-left - рамка слева;
border-right - рамка справа;

Чтобы убрать рамки элемента нужно прописать в свойстве border — none. Пример:

.primer2 { 
  border: none; /* у элемента с классом primer2 не будет рамки */
}

outline

Outline — это свойство, которое нужно для установки внешней рамки элемента. Есть два отличия от border:

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

Синтаксис свойства:

outline: 3px solid #0085cc; /* рамка 3 пикселя синяя*/