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

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

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

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

<div class="box"></div>

.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;   /* 影を利用した外余白   */
}