6XC

CSS Border(枠線)ジェネレーター

太さ・スタイル(solid、dashed、dotted、double…)・色・角丸をビジュアルに調整し、ライブプレビューで枠線をデザインします。

667回閲覧

borderプロパティとは

ショートハンド記法はborder: 太さ スタイル 色、例えばborder: 2px dashed #5b3df5のように書きます。スタイルにはsolid、dashed、dotted、double、groove、ridge、inset、outsetなどがあります。border-radiusと組み合わせれば角丸の枠に、片側だけ(border-topなど)にスタイルを当てればタブの下線のようなアクセントにも使えます。

よくある質問

枠線を付けると要素のサイズが変わるのはなぜですか?

既定では枠線はボックスの寸法に上乗せされます。box-sizing: border-boxを設定すると、幅と高さに枠線の分も含まれるようになります — 多くのリセットCSSが採用している現代的な標準です。

doubleスタイルを表示するには何px必要ですか?

doubleスタイルには最低でも3pxが必要です — 2本の線とその間の隙間の分です。それより細いと1本の線として描画されます。

関連ツール

CSSグラデーション ジェネレーター ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。 使ってみる CSS Box Shadow(ボックスシャドウ)ジェネレーター オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。 使ってみる CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみる CSSテキストシャドウ ジェネレーター オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。 使ってみる