Свойство border-width – Может задать толщину линии рамки (границы), может быть задано абсолютное значение , отрицательные значения недопустимы.
Эти свойства устанавливают толщину границы.
<line-width> = <length [0,∞]> | thin | medium | thick
Свойство border-width - это сокращенное свойство для установки border-top-width , border-right-width , border-bottom-width и border-left-width в одном объявлении.
Если есть только одно значение компонента, оно применяется ко всем сторонам.
p {
border-style: solid;
border-width: 1px; /* применяется ко всем сторонам */
}Если есть два значения, верхнее и нижнее устанавливаются на первое значение, а правое и левое - на второе.
p {
border-style: solid;
border-width: 1px 2px; /* верхнее и нижнее устанавливаются на первое значение,
а правое и левое - на второе. */
}Если есть три значения, верхнее значение устанавливается на первое значение, левое и правое - на второе, а нижнее - на третье.
p {
border-style: solid;
border-width: 1px 2px 3px; /* верхнее значение устанавливается на первое значение, левое и правое - на второе,
а нижнее - на третье. */
}Если есть четыре значения, они применяются к верхнему, правому, нижнему и левому соответственно.
p {
border-style: solid;
border-width: 1px 2px 3px 4px; /*применяются к верхнему, правому, нижнему и левому. */
}Пример:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Стиль линии рамки: Свойство border-style</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
p {
font-size:14pt;
width: 300px;}
.div {
padding: 10px;
border-style: solid;
border-top-width: 0;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 15px;
}
.div1 {
padding: 10px;
border-style: solid;
border-top-width: 0;
border-right-width: thick;
border-bottom-width: thin;
border-left-width: medium
}
.div2 {
padding: 10px;
border-style: solid;
border-width: 3px;
}
</style>
</head>
<body>
<h1>Толщина линии рамки: Свойство border-width</h1>
<p class="div">Свойство border-width – Может задать толщину линии рамки.</p>
<p class="div1">Свойство border-width - это сокращенное свойство для установки border-top-width ,
border-right-width , border-bottom-width и border-left-width в одном объявлении.</p>
<p class="div2">Если есть только одно значение компонента, оно применяется ко всем сторонам.</p>
</body>
</html>Толщина линии рамки: Свойство border-width
Рекомендуемые материалы
Спецификации
По материалам: