Радиус границы

Закругленные углы

Используйте такие утилиты, как .rounded-sm, .rounded или .rounded-lg, чтобы применить к элементу разные размеры радиуса границы.

Таблетки и круги

Используйте утилиту rounded-full для создания таблеток и кругов.

Без округления

Используйте rounded-none, чтобы удалить существующий радиус границы элемента.

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

Округление сторон отдельно

Используйте rounded-{t|r|b|l}{-size?} только для округления одной стороны элемента.

Отдельное скругление углов

Используйте rounded-{tl|tr|br|bl}{-size?} только для скругления одного угла элемента.

Адаптивность

Чтобы контролировать радиус границы элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите радиуса границы. Например, используйте md:rounded-lg, чтобы применить утилиту rounded-lg только при средних размерах экрана и выше.

<div class="rounded md:rounded-lg ...">
  <!-- ... -->
</div>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Радиусы границ

По умолчанию Tailwind предоставляет пять утилит для определения размера радиуса границы. Вы можете изменить, добавить или удалить их, отредактировав раздел theme.borderRadius вашей конфигурации Tailwind.

  // tailwind.config.js
  module.exports = {
    theme: {
      borderRadius: {
        'none': '0',
-       'sm': '0.125rem',
-       DEFAULT: '0.25rem',
+       DEFAULT: '4px',
-       'md': '0.375rem',
-       'lg': '0.5rem',
-       'full': '9999px',
+       'large': '12px',
      }
    }
  }

Варианты

По умолчанию, только responsive варианты создаются для утилит border radius.

Вы можете контролировать, какие варианты создаются для утилит border radius для изменения свойства borderRadius в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       borderRadius: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения border radius, Вы можете полностью отключить их, установив для borderRadius свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     borderRadius: false,
    }
  }