フリー素材｜画像を使用しない囲み枠、飾り枠-05

ボーダー背景の囲み枠、飾り枠

色や大きさはお好みで設定してください
s_box41
▼html/css▼
html
<div class="s_box41">
<div class="box-inner">
ここに文字
</div>
</div>
css
.s_box41 {
background:#fff;
border:2px solid #2bf0fa;
border-radius:5px;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:15px 0;
width:80%
}
.s_box41 .box-inner{
background-color:#cbfefe;
background-image:repeating-linear-gradient(0deg, transparent, transparent 2px, #fff 2px, #fff 4px );
background-size: auto auto;
padding:.5em 1em
}
× close
s_box41-b
▼html/css▼
html
<div class="s_box41">
<div class="box-inner">
ここに文字
</div>
</div>
css
.s_box41 {
background:#fff;
border:2px solid #ff3e86;
border-radius:5px;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:15px 0;
width:80%
}
.s_box41 .box-inner{
background-color:#ffcade;
background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,#fff 2px,#fff 4px);
background-size:auto auto;
padding:.5em 1em
}
× close
s_box41-c
▼html/css▼
html
<div class="s_box41">
<div class="box-inner">
ここに文字
</div>
</div>
css
.s_box41 {
background:#fff;
border:2px solid #fdac09;
border-radius:5px;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:15px 0;
width:80%
}
.s_box41 .box-inner{
background-color:#fedc96;
background-image:repeating-linear-gradient(0deg, transparent, transparent 2px, #fff 2px, #fff 4px );
background-size: auto auto;
padding:.5em 1em
}
× close
s_box41-d
▼html/css▼
html
<div class="s_box41">
<div class="box-inner">
ここに文字
</div>
</div>
css
.s_box41 {
background:#fff;
border:2px solid #aeda00;
border-radius:5px;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:15px 0;
width:80%
}
.s_box41 .box-inner{
background-color:#e3ff73;
background-image:repeating-linear-gradient(0deg, transparent, transparent 2px, #fff 2px, #fff 4px );
background-size: auto auto;
padding:.5em 1em
}
× close
▼指定の説明▼
.samplecss .box-inner {
background-color:#e3ff73;
  /* 背景色 */
background-image:repeating-linear-gradient(0deg, transparent, transparent 2px, #fff 2px, #fff 4px );
  /* 線の太さと色 */
}
WEB拍手