CSS-свойство `outline-style`

Свойство outline-style CSS задаёт стиль контура элемента. Контур — это линия, которая проводится вокруг элемента за пределами border.

Для задания внешнего вида контура часто удобнее использовать сокращённое свойство outline.

Попробуйте

outline-style: none;

outline-style: dotted;

outline-style: solid;

outline-style: groove;

outline-style: inset;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Синтаксис

/* Keyword values */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/* Global values */
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;

Значения

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

auto

Позволяет пользовательскому агенту отобразить пользовательский стиль контура.

none

Контур не используется.

dotted

Контур состоит из точек.

dashed

Контур состоит из коротких отрезков.

solid

Контур представляет собой сплошную линию.

double

Контур состоит из двух сплошных линий. Значение outline-width равно сумме ширины двух линий и промежутка между ними.

groove

Контур выглядит так, будто он вырезан в странице.

ridge

Противоположность groove: контур выглядит так, будто он выступает над страницей.

inset

Контур создаёт впечатление, что блок встроен в страницу.

outset

Противоположность inset: контур создаёт впечатление, что блок выступает над страницей.

Формальное определение

Формальный синтаксис

outline-style = 
  auto |
  <outline-line-style>

<outline-line-style> = 
  none |
  dotted |
  dashed |
  solid |
  double |
  groove |
  ridge |
  inset |
  outset

Примеры

Задание стилю контура значения auto

Значение auto обозначает пользовательский стиль контура, описанный в спецификации как «обычно стиль, который либо используется по умолчанию в пользовательском интерфейсе платформы, либо, возможно, более сложный стиль, который нельзя подробно описать с помощью CSS, например, контур с закруглёнными краями и полупрозрачными внешними пикселями, создающими эффект свечения».

HTML

<div>
  <p class="auto">Outline Demo</p>
</div>

CSS

.auto {
  outline-style: auto; /* same result as "outline: auto" */
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Результат

Задание стилям контура значений dashed и dotted

HTML

<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>

CSS

.dotted {
  outline-style: dotted; /* same result as "outline: dotted" */
}
.dashed {
  outline-style: dashed;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Результат

Задание стилям контура значений solid и double

HTML

<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>

CSS

.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Результат

Задание стилям контура значений groove и ridge

HTML

<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>

CSS

.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Результат

Задание стилям контура значений inset и outset

HTML

<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>

CSS

.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Результат

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

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

См. также

• outline
• outline-width
• outline-color