1. Главная
2. CSS
3. Свойство outline-offset

СВОЙСТВО OUTLINE-OFFSET

Свойство outline-offset добавляет расстояние между контуром и рамкой.

Поддержка браузеров

Синтаксис

outline-offset: единицы измерения|initial|inherit;

Значения свойства

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<div class="block block-1"></div>
<div class="block block-2"></div>
<div class="block block-3"></div>

.block {
    height: 50px;
    width: 50px;
    display: inline-block;
    border: 3px solid blue
}

.block-1 {
    outline-width: 3px;
    outline-style: dotted;
    outline-offset: 5px;
    outline-color: green
}

.block-2 {
    outline-width: 3px;
    outline-style: dashed;
    outline-offset: 8px;
    outline-color: yellow
}

.block-3 {
    outline-width: 3px;
    outline-style: double;
    outline-offset: 10px;
    outline-color: red
}