Перейти к содержимому
Aback Tools Logo

Генератор контуров

Создавайте эффекты CSS-контуров визуально с нашим бесплатным генератором контуров. Настраивайте ширину, стиль, цвет и смещение контура интерактивными элементами управления и смотрите результат в реальном времени. Сравнивайте отрисовку контура и рамки рядом с независимыми элементами управления для каждого. Включает пресеты ширины/смещения, настройки размера элемента и радиуса рамки, полную таблицу сравнения различий между контуром и рамкой и копирование CSS одним кликом. Идеально для индикаторов фокуса, токенов дизайн-систем, тестирования доступности и обучения CSS. Полностью приватно, 100% бесплатно и без регистрации.

Outline Generator
Build CSS outline effects visually with width, style, colour, and offset controls. Compare outline vs border rendering side by side and copy the CSS with one click.
3px
0px

Outline is drawn flush with the element border box edge.

Border is part of the box model and affects layout. It sits between padding and margin.

Outlineoffset: 0px
Outlined Element
Border
Border
Outlined Element

Border Controls

outline: 3px solid #3B82F6;
outline-offset: 0px;
border: 3px solid #10B981;

Outline vs Border - Key Differences

Box Model

Outline

Outline does NOT affect layout - it draws outside the border box and does not change element position or size.

Border

Border IS part of the box model - it adds to the element width/height and affects layout.

Per-Side Control

Outline

Outline cannot be set per-side - it applies uniformly around all four sides.

Border

Border can be set per-side using border-top, border-right, border-bottom, border-left.

Border Radius

Outline

Outline may NOT follow border-radius in all browsers (non-rounded corners).

Border

Border follows border-radius perfectly - rounded corners are supported everywhere.

Offset

Outline

Supports outline-offset (positive = outside, negative = inside) for positioning.

Border

Border does not support offset - it is always on the element edge.

Почему стоит использовать наш генератор контуров?

  • Визуальный конструктор контуров с живым предпросмотром: Генератор контуров обновляет предпросмотр и вывод CSS при каждом изменении - без нажатия кнопки. Настраивайте ширину, стиль, цвет и смещение с помощью ползунков, выборов цвета и кнопок пресетов. Смотрите эффект на живом элементе в реальном времени.
  • Сравнение контура и рамки: Смотрите отрисовку контура и рамки рядом с одинаковыми размерами и стилем элемента. Включайте/выключайте рамку и настраивайте её ширину, стиль и цвет независимо. Таблица сравнения объясняет ключевые различия между контуром и рамкой в блочной модели CSS.
  • 100% приватно - без загрузок: Вся генерация CSS выполняется локально в вашем браузере. Ваши цвета и настройки никогда не покидают устройство и не отправляются на сервер - безопасно для клиентских проектов и проприетарных дизайнов.
  • Бесплатно и без ограничений: Создавайте неограниченные эффекты контура без регистрации, подписки и ограничений. Генератор контуров полностью бесплатен навсегда, без рекламы, блокирующей интерфейс.

Типичные случаи использования генератора контуров

  • Стилизация UI-компонентов: UI-дизайнеры используют генератор контуров для создания индикаторов фокуса, выбранных состояний и эффектов наведения для интерактивных компонентов. outline предпочитают для колец фокуса, потому что он не влияет на макет и не вызывает перекомпоновку контента при переключении.
  • Разработка и отладка CSS: Фронтенд-разработчики используют генератор контуров для экспериментов со свойствами outline перед написанием CSS. Сравнение контура и рамки рядом помогает понять, как каждое свойство ведёт себя в блочной модели и какое использовать в разных сценариях.
  • Дизайн индикаторов фокуса: Разработчики, заботящиеся о доступности, используют генератор контуров для создания пользовательских индикаторов focus-visible, отвечающих требованиям WCAG 2.4.11 к внешнему виду фокуса. outline позволяет создавать видимые кольца фокуса, не сдвигающие макет при получении фокуса.
  • Соответствие требованиям доступности: Специалисты по доступности используют генератор контуров для проверки контраста и видимости индикаторов фокуса. Инструмент помогает убедиться, что цвета контура имеют достаточный контраст с фонами элементов для соответствия WCAG AA.
  • Обучение CSS: Учащиеся и преподаватели CSS используют генератор контуров, чтобы понять разницу между outline и border. Визуальное сравнение и подробная таблица заметок помогают легко понять, когда использовать каждое свойство.
  • Определение токенов дизайн-системы: Ответственные за дизайн-системы используют генератор контуров для определения согласованных токенов контура для состояний фокуса, ошибок и индикаторов выбора. Инструмент помогает стандартизировать ширину, стиль и цвет контура в дизайн-системе.

Что такое CSS outline?

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

Как работает наш генератор контуров

  1. Настройте контур: Задайте ширину контура (0-20px), выберите стиль (solid, dashed, dotted, double, groove, ridge, inset, outset или none) и выберите цвет с помощью выбора цвета или HEX-ввода. Предпросмотр обновляется мгновенно.
  2. Настройте смещение и размер элемента: Используйте ползунок outline-offset, чтобы разместить контур снаружи (положительное значение) или внутри (отрицательное) рамки элемента. Настройте ширину, высоту, радиус рамки и цвет фона элемента под ваш случай использования.
  3. Сравните с рамкой: Включите/выключите предпросмотр рамки. Настройте ширину, стиль и цвет рамки независимо. Предпросмотр рядом показывает, как контур и рамка различаются в отрисовке и поведении блочной модели.
  4. Скопируйте CSS: Нажмите «Скопировать CSS», чтобы скопировать полную CSS-декларацию для контура и рамки, готовую к вставке в вашу таблицу стилей.

Контур vs. рамка: когда что использовать

  • Индикаторы фокуса (особенно с :focus-visible)
  • Отладка границ элементов без влияния на макет
  • Индикаторы доступности, которые не должны вызывать перекомпоновку
  • Стили печати, где нужны видимые направляющие
  • Видимые границы элементов, являющиеся частью дизайна
  • Стилизация по сторонам (border-top, border-right и т. д.)
  • Интерактивные состояния, где изменения макета допустимы
  • Разделители ячеек таблиц и компоненты карточек

Доступность и индикаторы фокуса

Критерий успеха 2.4.11 WCAG 2.2 (Внешний вид фокуса) требует, чтобы индикаторы фокуса имели коэффициент контраста не менее 3:1 относительно соседних цветов и были как минимум такими же крупными, как сплошной контур толщиной 2px. Свойство CSS outline - рекомендуемый способ реализации индикаторов фокуса, потому что оно не вызывает сдвигов макета при изменении фокуса. Наш генератор контуров помогает проектировать и тестировать индикаторы фокуса на основе outline, отвечающие требованиям WCAG.

Часто задаваемые вопросы

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

outline не влияет на макет - он рисуется снаружи рамки, не изменяя положение или размер элемента. border входит в блочную модель. outline нельзя задать для отдельной стороны, и он может не следовать border-radius. border поддерживает управление по сторонам и следует border-radius.

Используйте outline для индикаторов фокуса, отладки и любого визуального индикатора, который не должен вызывать перекомпоновку макета. Используйте border, когда нужен контроль по сторонам или когда рамка является частью визуального дизайна.

Генератор контуров поддерживает ширину (0-20px), стиль (solid, dashed, dotted, double, groove, ridge, inset, outset, none), цвет (любой HEX-цвет) и смещение (от -10px до +20px). Размер элемента, радиус рамки и цвет фона также настраиваются.

Да. Вся генерация CSS выполняется на 100% на стороне клиента, в вашем браузере. Ваши цвета, текст и настройки никогда не отправляются на сервер.

CSS outline-offset поддерживается всеми современными браузерами, включая Chrome 1+, Firefox 1+, Safari 1.2+, Edge 12+ и Opera 7+.

В большинстве современных браузеров outline НЕ следует за border-radius. Контур остаётся прямоугольным даже на элементах со скруглёнными углами. Наш генератор контуров позволяет визуально увидеть это поведение.

Да. Генератор контуров на 100% бесплатный, без регистрации, без премиум-функций и без ограничений на использование. Создавайте неограниченное количество вариантов контура без ограничений.