На этой странице

CSS Стиль линии рамки

Любой элемент Web – страницы в окне Web – браузера занимает некоторую прямоугольную область. Содержимое этой области может окружено рамками, бордюрами, границами. Рамки могут иметь не только таблицы, но и любые другие элементы Web – страницы, изображения, блоки и т.д.

Рамка может быть заранее заданным стилем (сплошная линия, двойная линия, пунктирная линия, псевдо — трехмерная граница и т. Д.), Либо это может быть изображение. В первом случае различные свойства определяют стиль ( border-style ), цвет ( border-color ) и толщину ( border-width ) границы.

Свойство border-style - это сокращенное свойство для установки стиля border-top-style, border-right-style, border-bottom-style и border-left-style в одном объявлении, можно задать тип линии рамки.

Если есть только одно значение свойства, оно применяется ко всем сторонам.

Если есть два значения, верхнее и нижнее устанавливаются на первое значение, а правое и левое - на второе.

Если есть три значения, верхнее значение устанавливается на первое значение, левое и правое - на второе, а нижнее - на третье.

Если есть четыре значения, они применяются к верхнему, правому, нижнему и левому соответственно.

Свойство имеет следующие значения:

none – Без границ. Цвет и ширина игнорируются (т.е. ширина границы равна 0).


img { border-style: none; }

hidden – То же, что none, но имеет другое поведение в правилах разрешения конфликтов границ для таблиц со свернутыми границами [CSS2].


img { border-style: hidden; }

dotted – Серия круглых точек.


img { border-style: dotted; }

dashed – Серия штрихов с квадратными концами.


img { border-style: dashed; }

solid – Отдельный отрезок линии.


img { border-style: solid; }

double – Две параллельные сплошные линии с небольшим промежутком между ними. (Толщина линий не указана, но сумма линий и пробела должна равняться ширине границы.)


img { border-style: double; }

groove – Вдавленная рельефная линия (Обычно это достигается путем создания тени из двух цветов, которые немного светлее и темнее цвета границы.)


img { border-style: groove; }

ridge – Похоже, он выходит из холста.


img { border-style: ridge; }

outset – Весь блок элемента отображается, как будто он выдавлен из листа.


img { border-style: outset; }

Границы рисуются перед фоном элемента, но и за содержимым элемента (в случае его перекрытия).

Пример визуализации предопределенных стилей границ.

Пример:

<!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; 
}
div, p { 
    width: 300px; 
    height: 100px; 
    margin: 10px;
    font-size:14pt;     
    border-width: 10px;     
    padding: 5px }
div.cls1 {
    border-top-style: solid;
    border-right-style: dotted;
    border-bottom-style: double;
    border-left-style: dashed
 }
div.cls2 {
    border-top-style: groove;
    border-right-style: ridge;
    border-bottom-style: ridge;
    border-left-style: groove
 }
p.cls3 { border-style: outset }
p.cls4 { border-style: inset }
</style>
  </head>
  <body>
   <h1>Стиль линии рамки: Свойство border-style</h1>
   <div class="cls1">solid, dotted, double, dashed</div>
   <div class="cls2">groove, ridge, ridge, groove</div>
   <p class="cls3">outset</p>
   <p class="cls4">inset</p>
  </body>
</html>

Открыть пример в новом окне

Стиль линии рамки: Свойство border-style

Рекомендуемые материалы

Спецификации