главная / FAQ / примеры по css / как задать стиль границе

Стили границы (border)

Описание с помощью css границ у текстовых элементов и возможность их регулирования

В файле .css запись выглядит так:

.class { рамка_где: размер цвет тип }

Разберем как велосипед на запчасти:

.class – название класса.

Значения рамка_где:

border-right
border-left
border-bottom
border-top

Для описания всех границ сразу – используйте border.

Значения тип:




none –   линия отсутствует
dotted – пунктир
dashed   – штрих-пунктир
solid – непрерывная
double – двойная непрерывная
groove – трехмерная борозда
ridge – трехмерный гребень
inset – трехмерная врезка
outset – трехмерный орнамент



Пример:

.right     { border-right: 1px #808080 dotted}

.left      { border-left: 1px #808080 dotted}

.bottom    { border-bottom: 1px #808080 dotted}

.top       { border-top: 1px #808080 dotted}

.topbottom { border-top: 1px #808080 dotted;
             border-bottom: 1px #808080 dotted }


Синтаксис в документе:

<p class="top">штрихованная рамка сверху</p>


Пример:

	Штрихованная рамка снизу и сбоку


Выглядит так:

	
	
	
border-right dotted


border-right dashed


border-right solid


border-right double


border-right inset


border-right outset


border-right groove


border-right ridge
    
     
    
border-top dashed


border-top solid


border-top double


border-top groove


border-top ridge


border-top inset


border-top outset


border-top dotted
    
	
	

Или вот так:

border-top: gray dashed; border-bottom: gray solid; border-left: gray groove; border-right: gray dotted



NB: значения ширины, высоты, положения текстового дескриптора, а также значения цвета, толщины и типа самой рамки можно указывать сколь угодно желаемые.
Главное, чтобы браузеры понимали правильно :) Или хотя бы вообще понимали.

 

 главная  / FAQ / примеры по css / как задать стиль границе

Annet.dn.ua

Стили границы (border)