border-style

Функции PHP

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Sep

2010

Синтаксис

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit

Значения

Для управления видом границы предоставляется несколько значений свойства border-style. Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.

Табл. 1. Вид рамки в зависимости от стиля и толщины границы элемента
1 пиксел	3 пиксела	5 пикселов	7 пикселов
dotted	dotted	dotted	dotted
dashed	dashed	dashed	dashed
solid	solid	solid	solid
double	double	double	double
groove	groove	groove	groove
ridge	ridge	ridge	ridge
inset	inset	inset	inset
outset	outset	outset	outset

Кроме перечисленных в таблице значений используются следующие ключевые слова.

none: Не отображает границу и ее толщина (border-width) задается нулевой.
hidden: Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще.
inherit: Наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.

*Табл. 2. Зависимость результата использования от числа значений*
Число значений	Результат
1	Стиль границы будет задан для всех сторон элемента.
2	Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой.
3	Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4	Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>border-style</title>
  <style type="text/css">
   P { 
    border-style: double; /* Стиль линии вокруг параграфа */
    padding: 5px; /* Поля вокруг текста */
   }
  </style> 
 </head> 
 <body> 
  
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  
 </body> 
</html>

Результат данного примера показан ни рис. 1.

Рис. 1