結果は情報提供のみを目的としており、誤りを含む場合があります。重要な情報は必ずご自身で確認してください。本ツールのご利用は自己責任でお願いいたします。
このツールでできること
ボーダーラディウス生成ツールでは、4つのスライダーを使ってボックスの各角を0〜100ピクセルの範囲で個別に丸め、その形をライブプレビューで確認できます。出力は、スタイルシートにそのまま貼り付けられる1行のborder-radius宣言です。初期値は4つの角すべて20pxです。
値はCSSが想定する順序、つまり左上の角から時計回りに左上、右上、右下、左下の順で書き出されます。すべて同じ値にすれば均等に丸いカードに、値を変えれば吹き出し、タブ、葉っぱ形などの非対称なデザインになります。このショートハンドは、現行のすべてのブラウザでプレフィックスなしで動作します。
こんなときに使えます
- カード、ボタン、入力フィールドの角丸をデザインシステムに合わせるとき。
- タブの上側の角だけ、またはドロップダウンの下側の角だけを丸めるとき。
- 1つの角だけが尖ったチャットの吹き出しの形を作るとき。
- CSSを編集してリロードする代わりに、さまざまな半径をすばやく試すとき。
使用例
入力
左上24、右上24、右下4、左下24出力
border-radius: 24px 24px 4px 24px;このツールについての質問
完全な円を作るには？
正方形の要素にborder-radius: 50%を指定します。パーセンテージは要素のサイズに対する相対値なので、幅に関係なく円のままです。一方、ピル型のボタンには999pxのような大きなピクセル値を使います。
背景が角丸の外にはみ出すのはなぜですか？
独自の背景を持つ子要素が、角の上に描画されることがあります。角を丸めた親要素にoverflow: hiddenを追加するか、子要素にも同じ半径を指定してください。
角を楕円形にできますか？
はい。CSSでは、border-radius: 50px / 25pxのようにスラッシュで区切って、角ごとに2つの半径を指定できます。このツールは一般的な円形の書き方で出力するので、2つ目の値は出力を編集して追加してください。
border-radiusは影にも影響しますか？
はい。box-shadowは角丸の輪郭に沿うため、角の形が一致します。影はボックスシャドウ生成ツールで作成し、2つの宣言を組み合わせてください。
このツールは無料ですか？
はい、無料でご利用いただけます。登録・メールアドレス不要。結果はこのページに表示されます。
結果はどこで確認できますか？
このページでツールを使用すると、結果がここに表示されます。メールで受け取る必要はありません。