Как сделать обводку css
Перейти к содержимому

Как сделать обводку css

  • автор:

Свойство border: границы для блоков

Несколькими уроками ранее мы рассматривали схематическое изображение блока веб-страницы, а также вкратце рассказывали о таком свойстве CSS как border , с помощью которого можно задать границы для элемента. В этот раз мы более детально рассмотрим это свойство на примерах.

Граница располагается между полем и отступом. Это значит, что margin находится за границей. Границу можно задавать как со всех четырех сторон (как бы заключая блок в рамку), так и с одной, двух или трех сторон. В CSS можно управлять толщиной, цветом и стилем границ. Изучим это подробнее.

Border-width: ширина границы

С помощью свойства border-width задается ширина границы. Наиболее часто этот размер указывается в пикселях. Можно задать одинаковую либо различную ширину для всех четырех границ, например:

/* все 4 границы имеют ширину 2px: */ border-width: 2px; /* верхняя и нижняя границы имеют ширину 2px, левая и правая — 4px: */ border-width: 2px 4px; /* верхняя граница — 2px, левая и правая — 6px, нижняя — 3px: */ border-width: 2px 6px 3px; /* верхняя граница — 2px, правая — 3px, нижняя — 4px, левая — 5px: */ border-width: 2px 3px 4px 5px;

Кроме этого, существуют ключевые слова для обозначения ширины границы:

  • thin — граница шириной 2px;
  • medium — граница шириной 4px;
  • thick — граница шириной 6px.

Border-color: цвет границы

Свойство border-color задает цвет для границ. Цвета можно указывать в любом формате CSS: ключевыми словами, в шестнадцатеричном виде либо в RGB — зависит от того, как вам удобнее. По аналогии с предыдущим свойством, можно устанавливать как один цвет для всех границ, так и выбирать разные цвета для каждой границы.

border-color: #FFFF00;

Также можно задать прозрачный цвет, записав:

border-color: transparent;

Border-style: стиль границы

Благодаря свойству border-style вы можете делать из обычной границы пунктирную, двойную, объемную — существует много различных значений. Для этого воспользуйтесь следующими ключевыми словами:

Варианты значений border-style

  • solid — сплошная граница;
  • dotted — граница из точек;
  • dashed — пунктирная граница;
  • double — двойная граница;
  • groove — объемная граница-выемка;
  • ridge — объемная граница с толстой кромкой (по сути, инверсия предыдущего стиля);
  • outset — выдавленная граница;
  • inset — вдавленная граница (по сути, инверсия предыдущего стиля).

Как и в случае со свойствами border-width и border-color , для каждой границы блока можно задавать отдельный стиль — например, вы можете сделать верхнюю и нижнюю границы пунктирными, а правую и левую — двойными. Здесь уже все зависит лишь от фантазии.

border-style: double dotted;

Обратите внимание: в разных браузерах внешний вид границ может немного отличаться.

Общее CSS-свойство border: 3 в 1

Чтобы задать стиль для границы, не обязательно по очереди использовать все три вышеперечисленных свойства. Достаточно знать об общем универсальном свойстве border CSS, с помощью которого вы гораздо быстрее напишете стиль и сэкономите место. Для этого в произвольном порядке запишите значения для всех трех свойств:

border: 2px dotted #FF0000;

Границы для отдельных сторон

При помощи дополнительных свойств border в CSS вы можете создавать стиль для каждой границы блока по отдельности. В этом вам помогут следующие свойства:

  • border-top — стиль для верхней границы;
  • border-right — для правой границы;
  • border-bottom — для нижней границы;
  • border-left — для левой границы.
border-top: 2px solid #0000FF; border-bottom: 7px double #000080;

Разнообразие стилей border

Итоги

Теперь, когда вы знаете, как делать границы для блоков, вы можете потренироваться в их создании. Существует масса способов кратко описать стиль, избежав чрезмерного количества строк в файле CSS. Немаловажную роль здесь играет знание принципов каскадности таблиц стилей. Рассмотрим пример.

Допустим, вы хотите создать рамку для блока div с тремя сплошными серыми границами, а нижнюю границу сделать пунктирной зеленой. Можно записать этот стиль таким образом:

Но это слишком длинная запись. Всё это можно записать короче:

Как упоминалось выше, здесь мы воспользуемся свойствами каскадности CSS. Сначала мы записываем стиль для всех четырех сторон рамки, после чего указываем стиль отдельно для нижней границы, тем самым частично перезаписывая предыдущий стиль. Очень важно соблюдать эту последовательность строк.

Мини-задание

Попробуйте создать рамку для блока div с размерами 200×200 пикселей. Стили для рамки должны быть такими:

  • Верхнюю и нижнюю границы сделайте сплошными solid , задайте им одинаковый цвет на выбор и ширину 5 пикселей.
  • Левую границу сделайте пунктирной dashed , шириной 3 пикселя, цвет выберите отличный от предыдущего.
  • Правую границу сделайте двойной double , шириной 7 пикселей, цвет отличный от двух предыдущих.

В конечном итоге ваша работа должна выглядеть так (за исключением цвета, который вы выбираете сами):

Результат задания (вид в Chrome)

outline

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

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

Светло-сиреневая обводка вокруг кнопки — outline

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

Пример

Скопировать ссылку «Пример» Скопировано

Добавим элементу обводку, которая будет отодвинута от края на 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 .

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

outline — width

Скопировать ссылку «outline-width» Скопировано

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

outline — style

Скопировать ссылку «outline-style» Скопировано

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

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

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

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

outline — color

Скопировать ссылку «outline-color» Скопировано

  • любое доступное значение цвета в вебе, включая ключевые слова transparent , current Color .
  • 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 можно задать только одно значение, указывающее на стиль обводки. Без него обводка не будет отображаться. Если задано только одно значение, то цвет будет совпадать с цветом текста (подражание ключевому слову current Color ), а размер будет соответствовать ключевому слову medium (что, в свою очередь, равно 3 пикселям).

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

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

Подсказки

Скопировать ссылку «Подсказки» Скопировано

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

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

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

На практике

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

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

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

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

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

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

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

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

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

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

Как сделать обводку в css?

Как сделать обводку вокруг прямоугольника со скругленными углами?

  • Вопрос задан более трёх лет назад
  • 2629 просмотров

Комментировать

Решения вопроса 1

frontend developer

border:1px solid black;
border-radius:20px;

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Ответы на вопрос 1

Разработка бизнес-решений на 1С-Битрикс под ключ

Ответ написан более трёх лет назад

Комментировать

Нравится Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Дробит бекграунд при использовании margin?

  • 1 подписчик
  • час назад
  • 21 просмотр

html

  • HTML
  • +1 ещё

Хочу как на фото. Но у меня Почему-то текст находится под фото и за пределы фотографии не может выйти?

  • 1 подписчик
  • 2 часа назад
  • 34 просмотра

css

  • CSS

Как сделать кнопку «play» как в YouTube?

  • 1 подписчик
  • 3 часа назад
  • 58 просмотров

css

  • CSS
  • +2 ещё

Как оптимизировать анимацию?

  • 1 подписчик
  • 6 часов назад
  • 51 просмотр

css

  • CSS

Как пофиксить баг с font-weight при наведении?

  • 1 подписчик
  • 10 часов назад
  • 63 просмотра

php

  • PHP
  • +1 ещё

Как получить файл из формы с input type=»file» в PHP или в целом получить файл любым способом?

  • 1 подписчик
  • 19 часов назад
  • 79 просмотров

css

  • CSS

Как сделать такую разметку?

  • 1 подписчик
  • 23 часа назад
  • 73 просмотра

javascript

  • JavaScript
  • +1 ещё

Не работают скрипты перевода, что делать?

  • 1 подписчик
  • вчера
  • 81 просмотр

css

  • CSS

Почему на ios разный select?

  • 1 подписчик
  • вчера
  • 77 просмотров

css

  • CSS

Как расположить панель внизу через стили css?

  • 1 подписчик
  • вчера
  • 51 просмотр

от 40 000 до 55 000 ₽

от 250 000 ₽

от 130 000 ₽

19 февр. 2024, в 20:51

1500 руб./за проект

19 февр. 2024, в 20:50

1500 руб./за проект

19 февр. 2024, в 20:20

2000 руб./за проект

Минуточку внимания

Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями

  • Как использовать русские символы из файла в качестве ключа для unordered_map?
    • 3 подписчика
    • 2 ответа
    • 3 подписчика
    • 3 ответа
    • 2 подписчика
    • 3 ответа
    • 2 подписчика
    • 2 ответа
    • 2 подписчика
    • 1 ответ
    • 2 подписчика
    • 2 ответа
    • 2 подписчика
    • 3 ответа
    • 2 подписчика
    • 0 ответов
    • 2 подписчика
    • 2 ответа
    • 1 подписчик
    • 1 ответ

    Как сделать обводку текста в CSS

    Для создания обводки текста в CSS, вы можете использовать свойство text-stroke .

    Пример текста с обводкой

    В этом примере текст белого цвета с обводкой в 1 пиксель черного цвета. Обратите внимание, что свойство -webkit-text-stroke используется для браузеров, основанных на WebKit (например, Safari), в то время как свойство text-stroke используется для остальных браузеров. Также обратите внимание, что не все браузеры поддерживают это свойство.

    Кроме свойства text-stroke , существуют и другие способы создания обводки текста в CSS, например, с помощью свойства text-shadow .

    Пример текста с обводкой тенью

    В этом примере текст белого цвета с обводкой из четырех теней черного цвета, сдвинутых на 1 пиксель в разные стороны. Такой способ удобен, если необходимо сделать разноцветную обводку.

    Также можно использовать комбинацию свойств “text-stroke” и “text-shadow” для создания более сложной обводки текста.

    Пример текста с двойной обводкой

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *