Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Расположение и границы : border-style

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

Атрибут border-style | Свойство borderStyle

Это свойство устанавливает стиль для всех границ элемента одновременно.

Синтаксис

HTML { border-style : sStyle }
Скрипты [ sStyle = ] object.style.borderStyle

Возможные значения

sStyle
Строка, которая может определять и принимать одно из следующих значений:
none Значение по умолчанию. Линия не отображается, и значение ее толщины обнуляется. Значение borderWidth не принимается во внимание.
dotted Граница представляет собой линию, состоящую из набора точек. Это значение поддерживается на платформе Macintosh, начиная с браузера Microsoft Internet Explorer 4.01 и на платформе Windows, начиная с браузера Internet Explorer 5.5. На платформах Unix и Windows с ранними версиями браузера Internet Explorer граница, для которой установлено это значение, отображается в виде сплошной линии.
dashed Граница представляет собой пунктирную линию, состоящую из серии коротких отрезков. Это значение поддерживается на платформе Macintosh, начиная с браузера Microsoft Internet Explorer 4.01 и на платформе Windows, начиная с браузера Internet Explorer 5.5. На платформах Unix и Windows с ранними версиями браузера Internet Explorer граница, для которой установлено это значение, отображается в виде сплошной линии.
solid Граница представляет собой сплошную линию.
double Граница представляет собой двойную линию. Суммарная толщина двух отдельных линий и расстояние между ними зависит от значения параметра borderWidth. Оно должно быть равно по крайней мере 3 пикселям, чтобы граница могла быть отображена в виде двойной линии.
groove Граница отображается в виде вдавленной линии.
ridge Граница отображается в виде рельефной линии.
inset Граница отображается в виде вдавленной псевдотрехмерной линии.
outset Граница отображается в виде выпуклой псевдотрехмерной линии.
window-inset Граница отображается также как при значении inset, но добавляется дополнительная тонкая выпуклая рамка. Доступно в браузере Internet Explorer, начиная с версии 6.
hidden Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще. Границы со значением none имеют меньший приоритет. Доступно в браузере Internet Explorer, начиная с версии 8.

Свойство borderStyle не наследуется, то есть должно быть определено отдельно для каждого элемента. Значением по умолчанию является none.

Одновременно может быть определено до четырех значений для данного свойства:

Одно значение Стиль задается одновременно для всех границ элемента.
Два значения Первое задает стиль верхней и нижней границ, а второе - левой и правой.
Три значения Первое задает стиль верхней границы, второе - одновременно левой и правой, третье - нижней.
Четыре значения Значения для границ задаются по часовой стрелке, начиная с верхней границы. Порядок задания стиля: верхняя, правая, нижняя и левая границы.

Замечания

Если свойство borderWidth больше нуля, то чтобы оно применялось, его необходимо задать для атрибута border-style.

В Internet Explorer 5.5 borderStyle применяется для строковых объектов. В ранних версиях Windows Internet Explorer строковые объекты должны были быть описаны с помощью position: absolute, чтобы использовать это свойство. Формат элемента устанавливается путем задания значений свойствам height и width.

Примеры

Следующие примеры иллюстрируют применение свойства borderStyle и атрибута border-style для задания стиля границ объекта.

В первом примере используется атрибут border-style для задания стиля groove границам элемента при наведении на него курсора мыши.

<head>
<style type="text/css">
td {
    border-style: solid;
    border-width: 0.5cm;
}
.change {
    border-style: groove;
}
</style>
</head>

<body>

<table border="">
    <tr>
        <td onmouseover="this.className='change'" onmouseout="this.className=''">
            <img src="sphere.jpg" alt="spere image"> 
        </td>
    </tr>
</table>

Во втором примере для изменения стиля границ элемента на groove применяется свойство borderStyle.

<td onmouseover="this.style.borderWidth='0.5cm';
    this.style.borderStyle='groove'">

Стандарты

Это свойство определено в Cascading Style Sheets (CSS), Level 2 (CSS2)

Поддерживаемые браузеры

Internet Explorer 8.0, в версиях 6.0 и 7.0 возможны ошибки

Opera 8.0, 9.2, 9.5

Safari 1.3, 2.0, 3.1

Firefox 1.5, 2.0, 3.0

Смотри также

border

Ссылки на источники

http://msdn.microsoft.com/en-us/library/ms533526(VS.85).aspx

https://developer.mozilla.org/en/CSS/border-style

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования