Генератор CSS Outline
Налаштування outline
Живе превʼю
Що таке CSS Outline Generator
Цей CSS Outline Generator допомагає швидко зібрати outline для кнопок, інпутів, карток і focus state. Ви можете змінювати товщину, стиль, колір і outline-offset, а потім копіювати готовий CSS.
На відміну від border, outline не впливає на розмір елемента в макеті. Тому він зручний для focus ring, accessibility state і виділення без зсуву верстки.
Як користуватися
- Встановіть товщину, стиль, колір і відступ outline.
- Дивіться, як превʼю оновлюється одразу.
- Натисніть Generate, щоб отримати нормалізоване значення outline.
- Або вставте готовий CSS outline у поле вводу й натисніть Parse, щоб розібрати його назад.
Поради
- Використовуйте outline для focus state, щоб верстка не смикалась.
- Додатний outline-offset відсуває outline від елемента.
- Пунктирний або крапковий outline добре підходить для editor-style інтерфейсів.
- Для доступності краще брати контрастний колір outline.
Перевірки CSS outline перед стилізацією focus
Outlines не займають місця в layout і важливі для keyboard focus, тому decorative changes не повинні приховувати interaction state.
Зберігайте focus видимим
Не прибирайте browser outline без чіткої заміни для кожного interactive element і background.
Тестуйте outline offset
Перевірте offsets біля rounded corners, clipped elements, overflow containers, сусідніх controls і країв screen.
Врахуйте contrast modes
Перевірте focus indicators у dark mode, forced colors, increased contrast і custom themes.
Уникайте clipping
Перегляньте overflow, transforms, sticky regions, dialogs і scroll containers, де outline може обрізатися.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.