CSS角丸ボーダージェネレーター

左上(px):
右上(px):
右下(px):
左下(px):

CSS角丸ボーダージェネレーターとは?

CSS角丸ボーダージェネレーターは、CSSのボーダー半径を生成するツールです。4方向の角の値を入力して、効果を確認し、CSSコードを生成できます。

CSS3 border-radius プロパティ

プロパティ説明
border-radius要素のボーダー半径を定義します
border-top-left-radius左上隅の半径を定義します。
border-top-right-radius右上隅の半径を定義します。
border-bottom-right-radius右下隅の半径を定義します。
border-bottom-left-radius左下隅の半径を定義します。

当ツールは最初の形式を使用します。これは他の構文の省略形です。例:

border-radius: 10px 10px 10px 10px; 

最初の値は左上隅、2番目の値は右上隅、3番目の値は右下隅、4番目の値は左下隅に適用されます。

CSS角丸ボーダージェネレーターの使い方

  1. 左上(px) 右上(px) 右下(px) 左下(px) のプロパティ値を設定します
  2. 生成されたコードと効果が左側の領域に表示されます。
  3. 「コピー」ボタンをクリックして、CSSボーダー半径コードをコピーします。