web-разработка

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

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 пикселя синяя*/
Самоучитель по CSS