CSSボーダー生成器

線の太さ・種類・色・角丸から、borderとborder-radiusのCSSを作ります。プレビューつき。

px

プレビュー
CSS(コピー用)
—

計算式

使い方のヒント

double(二重線)は、太さが3px以上ないと、二重に見えません。角丸を、50%にすると、正方形が円になります。groove・ridgeは、色によって、立体的な効果の見え方が変わります。

関連ツール

よくある質問

CSSボーダー生成器では何がわかりますか？

線の太さ・種類・色・角丸から、borderとborder-radiusのCSSを作ります。プレビューつき。

何を入力すればいいですか？

次の項目を入力します: 線の太さ、線の種類、色、線を引く辺、角丸の大きさ、角丸の単位。内容を変えると、結果もそれに合わせて変わります。

結果にはどんな項目が表示されますか？

「CSS(コピー用)」などが表示されます。

どんな計算式を使っていますか？

ページ内の「計算式」にまとめています。たとえば「border: 太さ 種類 色; border-radius: 大きさ;」のような式です。

入力した値は外部に送信されますか？

いいえ。処理はお使いのブラウザの中だけで行い、サーバーには送信しません。

結果はどのくらい正確ですか？

処理は標準的な仕様に沿っています。本番で使う前に、実際の環境(ブラウザ・OS・言語)で動作を確認してください。

結果をコピーできますか？

はい。「結果をコピー」ボタンで、表示されている結果をクリップボードにコピーできます。

スマホでも使えますか？

はい。画面の幅に合わせて表示されます。アプリのインストールや会員登録は必要ありません。

同じカテゴリ(CSS・単位)の他のツールはありますか？

はい。CSS単位変換機、px→rem計算機、CSS clamp計算機、CSSサイズ計算機などがあります。

関連記事