サイト内検索

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

ボックス

外角丸・内角丸のボックス

[サンプル]

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

[メモ]

上辺（紫）・下辺の色（紫）
左右のborderの色（グリーン）
角を削る色（黒）を揃えると
画像を使用しないで、外角丸・内角丸のボックスを作ることができます。

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

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

サンプルのソース

[スタイルシート]

/* ----------------- 左右の線・グリーン*/
.sen{
border-left: 4px solid #bde3a6;
border-right: 4px solid #bde3a6;
}
/* ----------------- サイズ */
.sample{
width: 400px;
}
/* ----------------- テキスト欄の高さ・白色*/
.sample p{
margin:0px;
padding:0.5em 1em;
background-color: #ffffff;
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;}
/* ----------------- 内側の上辺・内側の下辺の色・白色 */
.kadotop2 span, .kadobottom2 span{
display:block;
height:1px;
overflow:hidden;
background-color: #ffffff;
}
/* ----------------- 内角を削る・黒色 */
.kadotop2, .kadobottom2{
background: #000000;
}
/* ----------------- 内角*/
.kado5{margin: 0px 5px;}
.kado6{margin: 0px 3px;}
.kado7{margin: 0px 2px;}
.kado8{margin: 0px 1px; height: 2px;}

[ｂｏｄｙの中]

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