toolsmoah

ボーダーラディウス生成器

CSSのborder-radiusプロパティを視覚的に作成・プレビューします。

生成されたCSS
各角の丸みを調整
プレビュー
生成されたborder-radius効果をプレビュー
プレビュー
生成されたCSS
border-radius: 20px;
サンプル
定義済みのborder-radiusスタイルをクリックして適用
ボーダーラディウスプロパティ

プロパティの順序

border-radiusプロパティは時計回りの順序で適用されます：左上 → 右上 → 右下 → 左下

短縮記法

  • • border-radius: 10px; - 全ての角に適用
  • • border-radius: 10px 20px; - 最初の値は左上・右下に、2番目の値は右上・左下に適用
  • • border-radius: 10px 20px 30px; - 最初は左上に、2番目は右上・左下に、3番目は右下に適用
  • • border-radius: 10px 20px 30px 40px; - 左上、右上、右下、左下の順に適用

使用のヒント

  • • 完全な円を作るには50%を使用
  • • ボタンには通常4-8pxが適切
  • • カードやパネルには8-16pxが一般的
  • • 非対称の半径でユニークなデザイン効果を作成
    ボーダーラディウス生成器 | toolsmoah