Border-radius生成
CSSのborder-radiusをビジュアルで作成。
Esquinas (horizontal)
Superior izq.16px
Superior der.16px
Inferior der.16px
Inferior izq.16px
border-radius: 16px;CSS Border-radius生成ツール：角丸をビジュアルで作成
CSS border-radiusプロパティは要素の角を丸くするために使用されます。シンプルな均一角丸から複雑な非対称形状まで、視覚的にプレビューしながらCSSコードを生成できます。
この生成ツールでは、4つの角を個別に調整でき、水平・垂直の半径を別々に設定して楕円形の角も作れます。プレビューがリアルタイムで更新されるため、デザインを確認しながら調整できます。
生成されたCSSコードはワンクリックでコピーでき、プロジェクトにすぐに適用できます。すべての処理はブラウザ内で行われます。
よくある質問
border-radiusの値はどう機能しますか？
各角には水平と垂直の2つの値があります。同じ場合は円形の角になり、異なる場合は楕円形になります。値はpx（固定サイズ）または%（要素サイズに対する相対値）で指定できます。50%にすると完全な円または楕円になります。
最もよく使われるborder-radiusの値は？
ボタンやカードには8px-16pxが人気です。タグやバッジには20px-9999pxで丸い端が作れます。円形のアバターには50%を使用します。Appleスタイルのデザインには12px-20pxが一般的です。
各角を個別にカスタマイズできますか？
はい、CSSでは4つの角を個別に設定できます：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。短縮形では「border-radius: 10px 20px 30px 40px」（左上から時計回り）と書けます。