⬭

CSS border-radius ジェネレーター

各角の半径をライブプレビューで調整し、CSS をコピーできます。

ファイルはこの端末に残ります

ファイルはブラウザ内で処理され、アップロードされません。ツールの実行に必要なコードと素材はダウンロードされます。アカウントも追跡もありません。

ダウンロードを使うと、このツールを1つのHTMLファイルに保存してオフラインで使えます。

左上 (20px) 右上 (20px) 右下 (20px) 左下 (20px)

出力

このツールについて

4 つのスライダーでボックスの各角を個別に丸め、生成された border-radius ルールをコピーできます。プレビューは即座に更新され、すべてブラウザー内で動作します。

角はどの順序で記述されますか？

ショートハンドは左上から時計回りに、左上・右上・右下・左下の順で並びます。

円を作れますか？

正方形のボックスで、すべての角を要素の幅の半分（またはそれ以上）に設定すると、きれいな円になります。