文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > BOXのデザイン > DIVの枠線

いろいろな枠線「border」のCSS生成

htmlの「div」などブロック要素の枠線・囲み線には多くの種類があります。組み合わせによって「シンプルなボックス」「きれいなボックス」「おしゃれなボックス」「スタイリッシュなボックス」などをデザインすることが出来ます。
当ページでは、実際に見ながら枠線のCSSを作成することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

枠線を変更してみよう

枠線の種類や色、太さなど自由に変更できますので、いろいろお試しください。

枠線の種類
枠線の太さなど
太さ
外余白
角丸
文字の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
背景の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
枠線の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
色々な罫線
使用したhtml
<div class="box"></div>
生成したCSS
.box {
  margin        : auto;                 /* サンプル用 中央寄せ  */
  box-sizing    : border-box;           /* 罫線も含む長さ       */
  width         : 100%;                 /* BOXの幅              */
  max-width     : 500px;                /* BOXの最大幅          */
  height        : 100px;                /* BOXの高さ            */
  padding       : 23px;                 /* 文字の位置合わせ     */
  font-size     : 30px;                 /* 文字サイズ           */
  text-align    : center;               /* 文字位置             */
  color         : #7f4600;              /* 文字色               */
  background    : #ffcc99;              /* BOXの背景色          */
  border        : 7px dotted #7f4600;   /* 枠線の指定           */
  border-radius : 1px;                  /* 角丸の指定           */
  box-shadow    : 0 0 0 12px #ffcc99;   /* 影を利用した外余白   */
}
「border」の使い方は以下を参照ください。
border 「枠線の設定」の構文
ページTOP
広告
広告

色々な枠線

太線と細線の組み合わせ

枠線の幅は上下左右で別々に設定することができます。
組み合わせによって見え方が大きく変わります。

左右太線+上下細線
HTML
CSS
表示
左のみ太線
HTML
CSS
表示
左太線+下細線
HTML
CSS
表示
左太線
HTML
CSS
表示
上太線+下細線
HTML
CSS
表示
ページTOP

角丸を利用した枠線

四隅の角を丸くすることで、枠線も丸くなります。
四隅の丸みはそれぞれ指定可能ですので、組み合わせによって見え方が変わります。

角丸「border-radius」の使い方は以下を参照ください。
角丸「border-radius」のCSS生成
角丸
HTML
CSS
表示
半円
HTML
CSS
表示
角丸+上下線
HTML
CSS
表示
左右半円
HTML
CSS
表示
左角丸+細線
HTML
CSS
表示
左右太線+角丸
HTML
CSS
表示
上太線角丸+下細線
HTML
CSS
表示
変形
HTML
CSS
表示
ページTOP

二重線

上下二重線
HTML
CSS
表示
左右二重線
HTML
CSS
表示
ページTOP

破線・点線

破線
HTML
CSS
表示
点線(ドット線)
HTML
CSS
表示
外余白付き破線
HTML
CSS
表示
外余白付き点線
HTML
CSS
表示
ページTOP

グラデーション

現時点で枠線にグラデーションを付ける機能はありません。(知りません)
このため、以下サンプルは上下に細いblockを追加して背景をグラデーションしています。

グラデーションの指定方法は以下を参照ください。
背景色のグラデーション用CSS生成
2色グラデーション
HTML
CSS
表示
3色グラデーション
HTML
CSS
表示
ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン