CSS ширина верхней границы

Последнее обновление 9 мая 2019 07:34:14 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

свойство ширины верхней границы

Свойство CSS border-top-width устанавливает ширину верхней границы окна .

Синтаксис

 border-top-width: width | унаследовать

Ценности

ширина : ширина верхней границы поля. В следующей таблице приведены значения:

Значение	Описание
тонкий	Тонкая граница устанавливается, если указано
Средняя	Средняя граница устанавливается, если указано.
толстый	Толстая граница устанавливается, если указано
длина	Вы можете использовать em, ex, in (для дюймов), cm (для сантиметров), mm (для миллиметров), pt (для точек), pc (для picas), px (для пикселей).
унаследовать	Указывает, что ширина границы должна быть унаследована от родительского элемента.

наследовать : если установлено, связанный элемент принимает вычисленное значение свойства border-top-width своего родительского элемента.

Начальное значение

Средняя

Относится к

Свойство border-top-width можно применять ко всем элементам HTML, которые могут образовывать блок.

унаследованный

Нет.

Процентное соотношение

Недоступен.

Средства массовой информации

визуальный.

Расчетное значение

Если значение установлено в none или hidden, оно равно 0, иначе это абсолютное значение.

Совместимость браузера

браузер	Версия
Internet Explorer	4.0 и выше
Firefox (Геккон)	1.0 и выше
опера	3.5 и выше
Safari (WebKit)	1.0 и выше

Пример свойства border-top-width

Код CSS:

.w3r_thin {
border-top-width: thin;
border-style: solid;
}
.w3r_thick {
border-top-width: thick;
border-style: solid;
}
.w3r_medium {
border-top-width: medium;
border-style: solid;
}
.w3r_px{
border-top-width: 3px;
border-style: solid;
}
.w3r_pc {
border-top-width: 3pc;
border-style: solid;
}
.w3r_pt {
border-top-width: 3pt;
border-style: solid;
}
.w3r_mm {
border-top-width: 5mm;
border-style: solid;
}
.w3r_cm {
border-top-width: 1cm;
border-style: solid;
}
.w3r_in {
border-top-width: 1in;
border-style: solid;
}
.w3r_ex {
border-top-width: 3ex;
border-style: solid;
}
.w3r_em {
border-top-width: 3em;
border-style: solid;
}

HTML код:

<!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=iso-8859-1">
<title>CSS border-top-width example - w3resource</title>
<link rel='stylesheet' href='border-top-width.css' type='text/css' />
</head>
<body>
<p  class="w3r_thin">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_thick">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_medium">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_px">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_pc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_pt">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_mm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_in">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_cm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_em">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_ex">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Посмотреть этот пример в отдельном окне браузера

Пример свойства border-top-width.

Предыдущая: CSS стиль границы
Далее: CSS свойство border-right-width