ブログ、Webページで枠線をつける方法

ブログ、Webページで枠線をつける方法を紹介。各HTMLの「ここに文字を入力」に好きな文字を入力し、コピペすれば、枠線のついた形で表示できます。

1.細かい点線枠

ここに文字を入力

HTML

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;”>ここに文字を入力</div>

2.点線枠 

ここに文字を入力

HTML

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">ここに文字を入力</div>

3.実線枠

ここに文字を入力

HTML

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">ここに文字を入力</div>

4.二重線枠 

ここに文字を入力

HTML

<div style="padding: 10px; margin-bottom: 10px; border: 3px double #333333;">ここに文字を入力</div>

5.丸角付き細かい点線枠

ここに文字を入力

HTML

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;”>ここに文字を入力</div>

6.丸角付き点線枠

ここに文字を入力

HTML

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;”>ここに文字を入力</div>

7.丸角付き実線枠 

ここに文字を入力

HTML

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;”>ここに文字を入力</div>

8.丸角付き二重線枠

ここに文字を入力

HTML 

<div style="padding: 10px; margin-bottom: 10px; border: 3px double #333333; border-radius: 10px;">ここに文字を入力</div>