サイト内検索

...タグ・小技・etc...

ボックス

外角丸のボックス

[サンプル]

外角丸ボックスのサンプル

[メモ]

上辺（紫）・下辺の色（紫）
ボックス内（ピンク）の色を揃えると
画像を使用しないで、背景色のある外角丸のボックスを作ることができます。

外角丸・内角のボックスについては、こちらをご覧ください。
外角丸・内角丸のボックスについては、こちらをご覧ください。

WEB工房きくちゃんを参照させていただきました。

[角丸テーブルの紹介をされているサイト]
Ｌｅｏーｎｅｔ

サンプルのソース

[スタイルシート]

/* ----------------- サイズ */
.sample{
width: 400px;
}
/* ----------------- テキスト欄の高さ・ピンク*/
.sample p{
margin:0px;
padding:0.5em 1em;
background-color: #ffddff;
height: 100px;
}
/* ----------------- 上辺・下辺の色・紫 */
.kadotop span, .kadobottom span{
display:block;
height:1px;
overflow:hidden;
background-color: #c8a1f0;
}
/* ----------------- 角を削る色・白色 */
.kadotop, .kadobottom{
background: #ffffff;
}
/* ----------------- 角*/
.kado1{margin: 0px 5px;}
.kado2{margin: 0px 3px;}
.kado3{margin: 0px 2px;}
.kado4{margin: 0px 1px; height: 2px;}

[ｂｏｄｙの中]

外角丸ボックスのサンプル