outline

Что-то вроде border на стероидах. Не влияет на размеры элемента, можно отодвинуть от границ на любое расстояние.

Присутствует в стандартных стилях браузера для акцента на сфокусированных интерактивных элементах. Типа размеры не меняются, вёрстка страницы не ломается, но пользователь наглядно видит, какой элемент в фокусе. Ситуация win-win!

Естественно, можно задавать это свойство любому элементу и без всяких фокусов 😏

Добавим элементу обводку, которая будет отодвинута от края на 10 пикселей. Для этого мы используем дополнительное свойство outline-offset. Оно идёт рука об руку с outline.

Зададим обводку шириной 5 пикселей зелёного цвета. Отодвинем её от края элемента на 10 пикселей. Рамку зададим для наглядности.

        
          
          .block {  border: 1px solid black;  outline: 5px solid green;  outline-offset: 10px;}
          .block {
  border: 1px solid black;

  outline: 5px solid green;
  outline-offset: 10px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

outline на самом деле шорткат — короткое свойство для записи сразу нескольких значений. Внутри себя оно содержит свойства outline-width, outline-style и outline-color.

Разберём доступные значения для каждого из свойств, а потом соберём всё в одну коробку:

• Ключевые слова thin, medium, thick — задают тонкую, среднюю или толстую ширину. Значения в пикселях на усмотрение браузера, но обычно соответствует 1, 3 и 6 пикселям соответственно.
• Конкретный размер — размер в любых единицах измерения, доступных в вебе. Например, 10px или 0.2em.

• none — обводка не отображается, даже если задано значение для outline-width.
• dotted — обводка будет состоять из точек. Круглых точек, вроде такого •••••
• dashed — обводка будет в виде пунктирной линии.
• solid — значение по умолчанию, если не задано иное. Сплошная линия.
• double — двойная сплошная линия.

Дальше создателей спецификации понесло в творчество и они придумали несколько фигурных обводок. Освещение таких рамок идёт сверху под прямым углом. И на это никак не повлиять:

• groove — обводка будет отображаться так, будто рамка объёмная, с вдавленной серединой и подсвечена. Цвет обводки (если он отличен от чёрного) станет двухцветным.
• ridge — обводка отобразится объёмной, её центр будет приподнят. Противоположно groove.
• inset — объёмная рамка, края направлены внутрь элемента.
• outset — объёмная рамка, края направлены наружу элемента, противоположно inset.

Проще всего понять на примерах:

• любое доступное значение цвета в вебе, включая ключевые слова transparent, currentColor.
• invert — ключевое слово, устанавливающее противоположный цвету фона элемента цвет обводки. Удобно для достижения максимальной контрастности.

Собираем все значения в шорткат.

Указано одно обязательное значение для outline-style:

        
          
          .selector {  outline: solid;}
          .selector {
  outline: solid;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

outline-color | outline-style:

        
          
          .selector {    outline: #f66 dashed;}
          .selector {
    outline: #f66 dashed;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

outline-style | outline-width:

        
          
          .selector {  outline: inset thick;}
          .selector {
  outline: inset thick;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

outline-color | outline-style | outline-width:

        
          
          .selector {  outline: green solid 3px;}
          .selector {
  outline: green solid 3px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Как можно понять из примера выше, для свойства outline можно задать только одно значение, указывающее на стиль обводки. Без него обводка не будет отображаться. Если задано только одно значение, то цвет будет совпадать с цветом текста (подражание ключевому слову currentColor), а размер будет соответствовать ключевому слову medium (что, в свою очередь, равно 3 пикселям).

Заодно посмотрим на доступные значения для outline-offset:

• Может принимать в качестве значения любое указание размера в любых единицах измерения. Можно задать отрицательное значение и тогда обводка будет сдвинута внутрь. Тогда стоит учитывать ширину самой обводки, поскольку свойство outline-offset указывает расстояние от края элемента до внутреннего края обводки.

💡 В отличие от border обводка всегда квадратная (прямоугольная), её углы нельзя скруглить. На сентябрь 2021 года обводка подстраивается под форму обводимого элемента! 🥳 Во всех актуальных версиях браузеров, кроме Safari 😤

💡 Обводка без зазрения совести накладывается на рядом стоящие элементы, не замечая их.

💡 Если задать обводку для многострочного текста, то каждая строка будет обведена своим прямоугольником. Лучше уж задать обводку для родителя.

На практике

Скопировать ссылку "На практике" Скопировано

Егор Левченко советует

Скопировать ссылку "Егор Левченко советует" Скопировано

🛠️ Если ваш дизайнер просит сбросить обводку у элементов в фокусе, не пользуйтесь outline: none, даже если это кажется самым простым способом.

Воспользуйтесь свойством outline-color со значением transparent.

Обводка в фокусе пропадёт, если пользователь не включил режим высокой контрастности. В контрастном режиме обводка будет на месте, а вот цвета и красивые дизайнерские тени — нет.

+ Развернуть

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Если вам не нравится обводка у элементов при фокусе, то не сбрасывайте её совсем, а попросите дизайнера или придумайте более уместный для вашего сайта стиль.

🛠 При помощи сочетания border и outline можно создать множественную рамку вокруг элемента.

+ Развернуть