ボーダー半径

要素の境界半径を制御するためのユーティリティ

Class reference

Class
Properties
.rounded-noneborder-radius: 0;
.rounded-smborder-radius: 0.125rem;
.roundedborder-radius: 0.25rem;
.rounded-mdborder-radius: 0.375rem;
.rounded-lgborder-radius: 0.5rem;
.rounded-xlborder-radius: 0.75rem;
.rounded-2xlborder-radius: 1rem;
.rounded-3xlborder-radius: 1.5rem;
.rounded-fullborder-radius: 9999px;
.rounded-t-noneborder-top-left-radius: 0; border-top-right-radius: 0;
.rounded-r-noneborder-top-right-radius: 0; border-bottom-right-radius: 0;
.rounded-b-noneborder-bottom-right-radius: 0; border-bottom-left-radius: 0;
.rounded-l-noneborder-top-left-radius: 0; border-bottom-left-radius: 0;
.rounded-t-smborder-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem;
.rounded-r-smborder-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem;
.rounded-b-smborder-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem;
.rounded-l-smborder-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem;
.rounded-tborder-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;
.rounded-rborder-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
.rounded-bborder-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
.rounded-lborder-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
.rounded-t-mdborder-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem;
.rounded-r-mdborder-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem;
.rounded-b-mdborder-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem;
.rounded-l-mdborder-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem;
.rounded-t-lgborder-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;
.rounded-r-lgborder-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
.rounded-b-lgborder-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
.rounded-l-lgborder-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
.rounded-t-xlborder-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem;
.rounded-r-xlborder-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem;
.rounded-b-xlborder-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
.rounded-l-xlborder-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
.rounded-t-2xlborder-top-left-radius: 1rem; border-top-right-radius: 1rem;
.rounded-r-2xlborder-top-right-radius: 1rem; border-bottom-right-radius: 1rem;
.rounded-b-2xlborder-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem;
.rounded-l-2xlborder-top-left-radius: 1rem; border-bottom-left-radius: 1rem;
.rounded-t-3xlborder-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;
.rounded-r-3xlborder-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem;
.rounded-b-3xlborder-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem;
.rounded-l-3xlborder-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem;
.rounded-t-fullborder-top-left-radius: 9999px; border-top-right-radius: 9999px;
.rounded-r-fullborder-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
.rounded-b-fullborder-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;
.rounded-l-fullborder-top-left-radius: 9999px; border-bottom-left-radius: 9999px;
.rounded-tl-noneborder-top-left-radius: 0;
.rounded-tr-noneborder-top-right-radius: 0;
.rounded-br-noneborder-bottom-right-radius: 0;
.rounded-bl-noneborder-bottom-left-radius: 0;
.rounded-tl-smborder-top-left-radius: 0.125rem;
.rounded-tr-smborder-top-right-radius: 0.125rem;
.rounded-br-smborder-bottom-right-radius: 0.125rem;
.rounded-bl-smborder-bottom-left-radius: 0.125rem;
.rounded-tlborder-top-left-radius: 0.25rem;
.rounded-trborder-top-right-radius: 0.25rem;
.rounded-brborder-bottom-right-radius: 0.25rem;
.rounded-blborder-bottom-left-radius: 0.25rem;
.rounded-tl-mdborder-top-left-radius: 0.375rem;
.rounded-tr-mdborder-top-right-radius: 0.375rem;
.rounded-br-mdborder-bottom-right-radius: 0.375rem;
.rounded-bl-mdborder-bottom-left-radius: 0.375rem;
.rounded-tl-lgborder-top-left-radius: 0.5rem;
.rounded-tr-lgborder-top-right-radius: 0.5rem;
.rounded-br-lgborder-bottom-right-radius: 0.5rem;
.rounded-bl-lgborder-bottom-left-radius: 0.5rem;
.rounded-tl-xlborder-top-left-radius: 0.75rem;
.rounded-tr-xlborder-top-right-radius: 0.75rem;
.rounded-br-xlborder-bottom-right-radius: 0.75rem;
.rounded-bl-xlborder-bottom-left-radius: 0.75rem;
.rounded-tl-2xlborder-top-left-radius: 1rem;
.rounded-tr-2xlborder-top-right-radius: 1rem;
.rounded-br-2xlborder-bottom-right-radius: 1rem;
.rounded-bl-2xlborder-bottom-left-radius: 1rem;
.rounded-tl-3xlborder-top-left-radius: 1.5rem;
.rounded-tr-3xlborder-top-right-radius: 1.5rem;
.rounded-br-3xlborder-bottom-right-radius: 1.5rem;
.rounded-bl-3xlborder-bottom-left-radius: 1.5rem;
.rounded-tl-fullborder-top-left-radius: 9999px;
.rounded-tr-fullborder-top-right-radius: 9999px;
.rounded-br-fullborder-bottom-right-radius: 9999px;
.rounded-bl-fullborder-bottom-left-radius: 9999px;

Rounded corners

.rounded-sm,.rounded,.rounded-lgなどのユーティリティを使用して、要素に異なる境界半径サイズを適用します。

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

Pills and circles

.rounded-fullユーティリティを使用して、ピル(錠剤の形)とサークルを作成します。

Pill shape
Circle
<div class="rounded-full py-2 px-4">Pill shape</div>
<div class="rounded-full h-16 w-16 flex items-center justify-center">Circle</div>

No rounding

要素から既存の境界半径を削除するには、.rounded-noneを使用します。

これは、より小さなブレークポイントで適用された境界半径を削除するために最も一般的に使用されます。

.rounded-none
<div class="rounded-none"></div>

Rounding sides separately

.rounded-{t|r|b|l}{-size?}を使用して、要素の片側のみを丸めます。

.rounded-t-lg
.rounded-r-lg
.rounded-b-lg
.rounded-l-lg
<div class="rounded-t-lg"></div>
<div class="rounded-r-lg"></div>
<div class="rounded-b-lg"></div>
<div class="rounded-l-lg"></div>

Rounding corners separately

.rounded-{tl|tr|br|bl}{-size?}を使用して、要素の1つの角だけを丸めます。

.rounded-tl-lg
.rounded-tr-lg
.rounded-br-lg
.rounded-bl-lg
<div class="rounded-tl-lg"></div>
<div class="rounded-tr-lg"></div>
<div class="rounded-br-lg"></div>
<div class="rounded-bl-lg"></div>

レスポンシブ

特定のブレークポイントで要素の境界半径を制御するには、既存の境界半径ユーティリティに{screen}:プレフィックスを追加します。たとえば、md:rounded-lgを使用して、中程度の画面サイズ以上でのみrounded-lgユーティリティを適用します。

Tailwindのレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

<div class="rounded sm:rounded-t md:rounded-b-lg lg:rounded-none xl:rounded-r ...">
  <!-- ... -->
</div>

カスタマイズ

Border Radiuses

デフォルトでは、Tailwindは5つの境界半径サイズユーティリティを提供します。 Tailwindコンフィグのtheme.borderRadiusセクションを編集することで、これらを変更、追加、または削除できます。

  // 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',
      }
    }
  }

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはborder radius utilitiesのために作られます。

あなたはどのバリアントがborder radius utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのborderRadiusプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

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

機能を使用しない場合

もしborder radius utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのborderRadius propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!