Округление углов контура div в CSS: border-radius и другие

Быстрый ответ

Для создания скруглённых границ элемента, у которого отсутствует свойство outline-radius, можно использовать сочетание border-radius с box-shadow. Пример приведён ниже:

.Element {
  border-radius: 15px;
  box-shadow: 0 0 0 2px #000; /* Используем тень в роли контура */
}

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

Повышаем эффект

Добавляем плавности

Чтобы box-shadow изменялась плавно при взаимодействии с элементом, например, при наведении курсора, примените свойство transition:

.element {
  transition: box-shadow 0.3s ease;
}

.element:hover {
  box-shadow: 0 0 0 3px #000; /* Немного усиливаем тень */
}

Подробнее об этом расскажет наш спикер на видео

Акцентируем внимание на полях ввода

Для выделения активного поля ввода можно использовать селектор input:focus. При фокусировке поле станет более заметным благодаря усиленной тени:

input:focus {
  box-shadow: 0 0 0 3px #000; /* Поле ввода выделяется при фокусировке */
}

Используем псевдоэлементы

С использованием псевдоэлемента :after создаём дополнительный слой границы, что расширяет возможности стилизации:

.element {
  position: relative;
}

.element:after {
  content: '';
  position: absolute;
  top: -2px; right: -2px; bottom: -2px; left: -2px; /* Псевдоэлемент охватывает элемент со всех сторон */
  border: 2px solid #000;
  border-radius: 17px; /* Учтите исходный радиус скругления и ширину границы */
  pointer-events: none; /* Псевдоэлемент не влияет на интерактивности элемента */
}

Учитываем высокую контрастность

Прозрачность тени поможет обеспечить высокую доступность даже при условиях сильной контрастности:

.element {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.7); /* Тень обеспечивает контраст, но не становится доминирующим элементом дизайна */
}

Создаём уникальные эффекты с помощью градиентов

Применяйте градиенты или смещения в box-shadow для особой выразительности стиля:

.element {
  background-image: linear-gradient(to bottom, #fff, #eee);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4), -1px -1px 5px rgba(0, 0, 0, 0.4); /* Двойное теневое смещение для создания объема */
}

Визуализация

Представьте, что мы сглаживаем острые края у нашего квадрата (🔲), превращая его в изящный и скруглённый объект (🔘) с помощью outline-radius. Иными словами, мы смягчаем жёсткость квадрата, делая его менее агрессивным. Понимаете, о чём речь? 🛋️✨

Погружение глубже

Совместимость в разных браузерах

Обеспечьте однородное отображение в различных браузерах с помощью вендорных префиксов:

.element {
  -moz-box-shadow: 0 0 0 2px #000; /* Для Firefox */
  -webkit-box-shadow: 0 0 0 2px #000; /* Для Safari и старых версий Chrome */
  box-shadow: 0 0 0 2px #000; /* Для всех остальных браузеров */
}

Альтернативные методы

Не стоит отдавать предпочтение сложным структурам, таким как вложенные DIV-узлы или использование библиотек JavaScript (например, jQuery), если нужна только эстетика.

Взгляд в будущее

Следите за последними обновлениями в WebKit и следите за внедрением новых функций, таких как outline-style: auto, которые, возможно, в скором времени предоставят продвинутые возможности управления радиусом скругления.

Оценка и совершенствование

Нельзя забывать о проверке ваших стилей в разнообразных браузерах и на разных устройствах. Таким образом, вы сможете поддерживать стабильность и привлекательность эффекта скругления, независимо от платформы.

Полезные материалы

1. border-radius – CSS: Каскадные таблицы стилей | MDN — детальная документация CSS свойства border-radius.
2. Формы в CSS | CSS-Tricks — гайд посвящённый созданию различных форм при помощи CSS, включая манипуляции с border-radius.
3. Свойство CSS border-radius — справочник и примеры использования border-radius в CSS.
4. "border-radius" | Can I use... Support tables for HTML5, CSS3, etc. — проверка совместимости браузеров с CSS свойством border-radius.
5. javascript – Прокрутка, если элемент не виден – Stack Overflow — обсуждение вопроса управления видимостью элементов, на которое может влиять форма и стили.
6. Блог, посвящённый дизайну и разработке — множество статей и ресурсов, посвящённых CSS, включая различные техники работы с border-radius.