🔲

【Tailwind和訳】BORDERS/Border Radius

2021/10/24に公開・約9,100字

Tailwind CSS

tech

この記事について

この記事は、BORDERS/Border Radiusの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Border Radius

要素のボーダーの半径を制御するためのユーティリティーです。

クラスとプロパティの対応表

Class	Properties
`rounded-none`	`border-radius: 0px;`
`rounded-sm`	`border-radius: 0.125rem;`
`rounded`	`border-radius: 0.25rem;`
`rounded-md`	`border-radius: 0.375rem;`
`rounded-lg`	`border-radius: 0.5rem;`
`rounded-xl`	`border-radius: 0.75rem;`
`rounded-2xl`	`border-radius: 1rem;`
`rounded-3xl`	`border-radius: 1.5rem;`
`rounded-full`	`border-radius: 9999px;`
`rounded-t-none`	`border-top-left-radius: 0px;` `border-top-right-radius: 0px;`
`rounded-t-sm`	`border-top-left-radius: 0.125rem;` `border-top-right-radius: 0.125rem;`
`rounded-t`	`border-top-left-radius: 0.25rem;` `border-top-right-radius: 0.25rem;`
`rounded-t-md`	`border-top-left-radius: 0.375rem;` `border-top-right-radius: 0.375rem;`
`rounded-t-lg`	`border-top-left-radius: 0.5rem;` `border-top-right-radius: 0.5rem;`
`rounded-t-xl`	`border-top-left-radius: 0.75rem;` `border-top-right-radius: 0.75rem;`
`rounded-t-2xl`	`border-top-left-radius: 1rem;` `border-top-right-radius: 1rem;`
`rounded-t-3xl`	`border-top-left-radius: 1.5rem;` `border-top-right-radius: 1.5rem;`
`rounded-t-full`	`border-top-left-radius: 9999px;` `border-top-right-radius: 9999px;`
`rounded-r-none`	`border-top-right-radius: 0px;` `border-bottom-right-radius: 0px;`
`rounded-r-sm`	`border-top-right-radius: 0.125rem;` `border-bottom-right-radius: 0.125rem;`
`rounded-r`	`border-top-right-radius: 0.25rem;` `border-bottom-right-radius: 0.25rem;`
`rounded-r-md`	`border-top-right-radius: 0.375rem;` `border-bottom-right-radius: 0.375rem;`
`rounded-r-lg`	`border-top-right-radius: 0.5rem;` `border-bottom-right-radius: 0.5rem;`
`rounded-r-xl`	`border-top-right-radius: 0.75rem;` `border-bottom-right-radius: 0.75rem;`
`rounded-r-2xl`	`border-top-right-radius: 1rem;` `border-bottom-right-radius: 1rem;`
`rounded-r-3xl`	`border-top-right-radius: 1.5rem;` `border-bottom-right-radius: 1.5rem;`
`rounded-r-full`	`border-top-right-radius: 9999px;` `border-bottom-right-radius: 9999px;`
`rounded-b-none`	`border-bottom-right-radius: 0px;` `border-bottom-left-radius: 0px;`
`rounded-b-sm`	`border-bottom-right-radius: 0.125rem;` `border-bottom-left-radius: 0.125rem;`
`rounded-b`	`border-bottom-right-radius: 0.25rem;` `border-bottom-left-radius: 0.25rem;`
`rounded-b-md`	`border-bottom-right-radius: 0.375rem;` `border-bottom-left-radius: 0.375rem;`
`rounded-b-lg`	`border-bottom-right-radius: 0.5rem;` `border-bottom-left-radius: 0.5rem;`
`rounded-b-xl`	`border-bottom-right-radius: 0.75rem;` `border-bottom-left-radius: 0.75rem;`
`rounded-b-2xl`	`border-bottom-right-radius: 1rem;` `border-bottom-left-radius: 1rem;`
`rounded-b-3xl`	`border-bottom-right-radius: 1.5rem;` `border-bottom-left-radius: 1.5rem;`
`rounded-b-full`	`border-bottom-right-radius: 9999px;` `border-bottom-left-radius: 9999px;`
`rounded-l-none`	`border-top-left-radius: 0px;` `border-bottom-left-radius: 0px;`
`rounded-l-sm`	`border-top-left-radius: 0.125rem;` `border-bottom-left-radius: 0.125rem;`
`rounded-l`	`border-top-left-radius: 0.25rem;` `border-bottom-left-radius: 0.25rem;`
`rounded-l-md`	`border-top-left-radius: 0.375rem;` `border-bottom-left-radius: 0.375rem;`
`rounded-l-lg`	`border-top-left-radius: 0.5rem;` `border-bottom-left-radius: 0.5rem;`
`rounded-l-xl`	`border-top-left-radius: 0.75rem;` `border-bottom-left-radius: 0.75rem;`
`rounded-l-2xl`	`border-top-left-radius: 1rem;` `border-bottom-left-radius: 1rem;`
`rounded-l-3xl`	`border-top-left-radius: 1.5rem;` `border-bottom-left-radius: 1.5rem;`
`rounded-l-full`	`border-top-left-radius: 9999px;` `border-bottom-left-radius: 9999px;`
`rounded-tl-none`	`border-top-left-radius: 0px;`
`rounded-tl-sm`	`border-top-left-radius: 0.125rem;`
`rounded-tl`	`border-top-left-radius: 0.25rem;`
`rounded-tl-md`	`border-top-left-radius: 0.375rem;`
`rounded-tl-lg`	`border-top-left-radius: 0.5rem;`
`rounded-tl-xl`	`border-top-left-radius: 0.75rem;`
`rounded-tl-2xl`	`border-top-left-radius: 1rem;`
`rounded-tl-3xl`	`border-top-left-radius: 1.5rem;`
`rounded-tl-full`	`border-top-left-radius: 9999px;`
`rounded-tr-none`	`border-top-right-radius: 0px;`
`rounded-tr-sm`	`border-top-right-radius: 0.125rem;`
`rounded-tr`	`border-top-right-radius: 0.25rem;`
`rounded-tr-md`	`border-top-right-radius: 0.375rem;`
`rounded-tr-lg`	`border-top-right-radius: 0.5rem;`
`rounded-tr-xl`	`border-top-right-radius: 0.75rem;`
`rounded-tr-2xl`	`border-top-right-radius: 1rem;`
`rounded-tr-3xl`	`border-top-right-radius: 1.5rem;`
`rounded-tr-full`	`border-top-right-radius: 9999px;`
`rounded-br-none`	`border-bottom-right-radius: 0px;`
`rounded-br-sm`	`border-bottom-right-radius: 0.125rem;`
`rounded-br`	`border-bottom-right-radius: 0.25rem;`
`rounded-br-md`	`border-bottom-right-radius: 0.375rem;`
`rounded-br-lg`	`border-bottom-right-radius: 0.5rem;`
`rounded-br-xl`	`border-bottom-right-radius: 0.75rem;`
`rounded-br-2xl`	`border-bottom-right-radius: 1rem;`
`rounded-br-3xl`	`border-bottom-right-radius: 1.5rem;`
`rounded-br-full`	`border-bottom-right-radius: 9999px;`
`rounded-bl-none`	`border-bottom-left-radius: 0px;`
`rounded-bl-sm`	`border-bottom-left-radius: 0.125rem;`
`rounded-bl`	`border-bottom-left-radius: 0.25rem;`
`rounded-bl-md`	`border-bottom-left-radius: 0.375rem;`
`rounded-bl-lg`	`border-bottom-left-radius: 0.5rem;`
`rounded-bl-xl`	`border-bottom-left-radius: 0.75rem;`
`rounded-bl-2xl`	`border-bottom-left-radius: 1rem;`
`rounded-bl-3xl`	`border-bottom-left-radius: 1.5rem;`
`rounded-bl-full`	`border-bottom-left-radius: 9999px;`

角の丸み

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

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

錠剤型と円形

丸みを帯びた形のユーティリティーを使って、錠剤や円を作成します。

<div class="rounded-full py-3 px-6...">Pill Shape</div>
<div class="rounded-full h-24 w-24 flex items-center justify-center...">Circle</div>

丸みをつけない

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

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

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

側面を別々に丸める

要素の片側だけを丸めるには、rounded-{t|r|b|l}{-size?}を使用します。

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

角を別々に丸める

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

<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ユーティリティが適用されます。

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

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

カスタマイズ

境界線の半径

デフォルトでは、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',
      }
    }
  }

バリアント

デフォルトでは、境界線の半径のユーティリティにはレスポンシブバリアントのみが生成されます。

tailwind.config.jsファイルのvariantsセクションにあるborderRadiusプロパティを変更することで、境界線の半径のユーティリティ用に生成されるバリアントをコントロールすることができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

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

無効化

境界線の半径のユーティリティをプロジェクトで使用しない場合は、設定ファイルのcorePluginsセクションでborderRadiusプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

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

Discussion

ログインするとコメントできます