Вторник, 02 Апреля 2013 16:12

CSS свойство border

Written by 
Оцени эту запись
(2 Голоса)

CSS свойство border позволяет задавать одновременно все характеристики границы элемента - ширину, стиль и цвет.

 

Пример:

 

border: 4px dotted red;

 

 

 

 

Ширину границы можно отдельно задавать свойством border-width. Значением свойства border-width может быть величина в пикселях или текстовые значения - thin(тонкая линия), medium(средняя), thick(толстая).

 

Значение по умолчанию - medium.

 

Стиль границы можно задать отдельно свойством border-style, которое может принимать значения dotted, dashed, solid, double, groove, ridge, inset, outset.

 

Рассмотрим примеры стилей границы, при ее ширине 5-10px.

 

 

 
 
 
 
 
 
 
 

 

Цвет рамки задается отдельно свойством border-color со значениями в виде названия цвета(white) или его кодом HEX(#fff).

 

border-color: blueviolet;

 

border-color: #f0f;

 

 

 

 
 

 

Свойства border-width, border-style и border-color позволяют задавать разные оформления для разных границ элемента. При задании одного значения, рамка со всех сторон будет одинаковой, при двух - вертикальные и горизонтальные будут отличаться, при задании четырех значений все границы будут разными:

 

border-color: blueviolet red yellow green;

border-color: blueviolet red;

border-color: blueviolet;

 

 

 
 
 

 

Для оформления только одной или нескольких границ элемента можно использовать специфические свойства:

 

  • border-top -- оформление верхней границы
  • border-right -- оформление правой границы
  • border-bottom -- оформление нижней границы
  • border-left -- оформление левой границы

 

Пример:

 

 

border-bottom: 3px double blue;

 

 

Text Text Text

 

Такие свойства аналогичны свойству border и описывают все характеристики границы, но работают только для заданной стороны.

 

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

 

  • border-top-color -- цвет верхней рамки
  • border-top-style -- стиль верзней рамки
  • border-top-width -- ширина верхней рамки
  • border-right-color -- цвет правой рамки
  • border-right-style -- стиль правой рамки
  • border-right-width -- толщина правой рамки
  • border-bottom-color -- цвет нижней границы элемента
  • border-bottom-style -- стиль нижней границы элемента
  • border-bottom-width -- толщина нижней границы элемента
  • border-left-color -- цвет левой рамки элемента
  • border-left-style -- стиль левой рамки элемента
  • border-left-width -- ширина левой рамки элемента

 

 

Пример 1.

 

border: 2px solid blue;

border-top-color: blueviolet;

 

 

Text Text Text

 

 

Пример 2.

 

border: 2px solid #999;

border-top-color: #eee;

border-left-color: #eee;

 

 

Text Text Text

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов