フリー素材|囲み枠、飾り枠-02

上下水玉の囲み枠、飾り枠

frame02-a
htmlとcssは共通
画像は使用するものを保存してください
別の画像を使用してもOKです
▼html/css/img▼
html
<div class="box02">
<div class="box-inner">
ここに文字
</div>
</div>
css
.box02{
background:url(back01.gif);
border:solid 1px #483b3c;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:20px 0;
width:80%  /* 幅 */
}
.box-inner{
background:#fff;
border-bottom:2px dashed #c3c2ad;
border-top:2px dashed #c3c2ad;
box-shadow:0 4px 0 #fff,0 -4px 0 #fff;
padding:15px
}
image

× close

frame02-b
frame02-c
frame02-d
frame02-e

カスタマイズサンプル

背景画像削除
backgroundをカラーコードで指定
角に丸み
cssにborder-radius:5pxを追加