文字数に合わせてサイズが変わるゴールドっぽい枠線

上品な印象のゴールドっぽい枠線です。

文字数に合わせてサイズが変わります。

シンプルな枠線
角丸枠線
タイトル付き枠線
タイトル付き角丸枠線があります♥

文字数に合わせてサイズが変わる枠線

実　線：solid

<div style="display:inline-block; border: 2px solid #DFC69B; padding: 15px;">本文はここに入力してください。
改行はShift+Enterで！</div>

二重線：double

<div style="display:inline-block; border: 4px double #DFC69B; padding: 15px;">本文はここに入力してください。
改行はShift+Enterで！</div>

点　線：dotted

<div style="display:inline-block; border: 2px dotted #DFC69B; padding: 15px;">本文はここに入力してください。
改行はShift+Enterで！</div>

破　線：dashed

<div style="display:inline-block; border: 2px dashed #DFC69B; padding: 15px;">本文はここに入力してください。
改行はShift+Enterで！</div>

文字数に合わせてサイズが変わる角丸枠線

実　線：solid

<div style="display:inline-block; border: 2px solid #DFC69B; padding: 15px; border-radius: 10px;">本文はここに入力してください。
改行はShift+Enterで！</div>

二重線：double

<div style="display:inline-block; border: 4px double #DFC69B; padding: 15px; border-radius: 10px;">本文はここに入力してください。
改行はShift+Enterで！</div>

点　線：dotted

<div style="display:inline-block; border: 2px dotted #DFC69B; padding: 15px; border-radius: 10px;">本文はここに入力してください。
改行はShift+Enterで！</div>

破　線：dashed

<div style="display:inline-block; border: 2px dashed #DFC69B; padding: 15px; border-radius: 10px;">本文はここに入力してください。
改行はShift+Enterで！</div>

文字数に合わせてサイズが変わるタイトルつき枠線

　タイトル　実　線：solid

<fieldset style="display:inline-block; border: 2px solid #DFC69B; padding: 15px;"><legend>　タイトル　</legend>本文はここに入力してください。
改行はShift+Enterで！</fieldset>

　タイトル　二重線：double

<fieldset style="display:inline-block; border:4px double #DFC69B; padding:15px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　点　線：dotted

<fieldset style="display:inline-block; border:2px dotted #DFC69B; padding:15px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　破　線：dashed

<fieldset style="display:inline-block; border:2px dashed #DFC69B; padding:15px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

文字数に合わせてサイズが変わるタイトルつき角丸枠線

　タイトル　実　線：solid

<fieldset style="display:inline-block; border: 2px solid #DFC69B; padding: 15px; border-radius: 10px;"><legend>　タイトル　</legend>本文はここに入力してください。
改行はShift+Enterで！</fieldset>

　タイトル　二重線：double

<fieldset style="display:inline-block; border:4px double #DFC69B; padding:15px; border-radius: 10px;"><legend>　タイトル　</legend>本文はここに入力してください。
改行はShift+Enterで！</fieldset>

　タイトル　点　線：dotted

<fieldset style="display:inline-block; border:2px dotted #DFC69B; padding:15px; border-radius: 10px;"><legend>　タイトル　</legend>本文はここに入力してください。
改行はShift+Enterで！</fieldset>

　タイトル　破　線：dashed

<fieldset style="display:inline-block; border:2px dashed #DFC69B; padding:15px; border-radius: 10px;"><legend>　タイトル　</legend>本文はここに入力してください。
改行はShift+Enterで！</fieldset>

枠線の使い方

「ブログを書く」のHTML表示に貼り付けてお使いください。