HTMLで直接styleを記述するサンプルコード。
Jimdoなどの無料ホームページ作成時に少し変化を持たせたいときに利用できます。
①細かい点線の枠に入れる
↓下記をコピーペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
ここに文字を入力。
</div>
②点線の枠に入れる
↓下記をコピーペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
ここに文字を入力。
</div>
③実線の枠に入れる
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
ここに文字を入力。
</div>
④二重線の枠に入れる
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;">
ここに文字を入力。
</div>
⑤細かい点線の枠に入れる（角丸つき）
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;">
ここに文字を入力。
</div>
⑥点線の枠に入れる（角丸つき）
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;">
ここに文字を入力。
</div>
⑦実線の枠に入れる（角丸つき）
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
ここに文字を入力。
</div>
⑧二重線の枠に入れる（角丸つき）
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px;">
ここに文字を入力。
</div>
⑨細かい点線の枠に入れる -背景色付き
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #ffff9;">
ここに文字を入力。
</div>
⑩点線の枠に入れる-背景色付き
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #ffff9;">
ここに文字を入力。
</div>
⑪実線の枠に入れる -背景色付き
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #ffff9;">
ここに文字を入力。
</div>
⑫二重線の枠に入れる -背景色付き
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; background-color: #ffff9;">
ここに文字を入力。
</div>
⑬細かい点線の枠に入れる（角丸つき） -背景色付き
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #e0ffff;">
ここに文字を入力。
</div>
⑭点線の枠に入れる（角丸つき） -背景色付き
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #e0ffff;">
ここに文字を入力。
</div>
⑮実線の枠に入れる（角丸つき） -背景色付き
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #e0ffff;">
ここに文字を入力。
</div>
⑯二重線の枠に入れる（角丸つき） -背景色付き
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #e0ffff;">
ここに文字を入力。
</div>
⑰細かい点線の枠に入れる - 濃い背景色付き・文字色変更
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #8a2be2; color: #ffffff;">
ここに文字を入力。
</div>
⑱点線の枠に入れる - 濃い背景色付き・文字色変更
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #8a2be2; color: #ffffff;">
ここに文字を入力。
</div>
⑲実線の枠に入れる - 濃い背景色付き・文字色変更
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #8a2be2; color: #ffffff;">
ここに文字を入力。
</div>
⑳二重線の枠に入れる - 濃い背景色付き・文字色変更
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; background-color: #8a2be2; color: #ffffff;">
ここに文字を入力。
</div>
㉑細かい点線の枠に入れる（角丸つき） - 濃い背景色付き・文字色変更
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #8a2be2; color: #ffffff;">
ここに文字を入力。
</div>
㉒点線の枠に入れる（角丸つき） - 濃い背景色付き・文字色変更
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #8a2be2; color: #ffffff;">
ここに文字を入力。
</div>
㉓実線の枠に入れる（角丸つき） - 濃い背景色付き・文字色変更
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #8a2be2; color: #ffffff;">
ここに文字を入力。
</div>
㉔二重線の枠に入れる（角丸つき） - 濃い背景色付き・文字色変更
↓下記をHTMLへコピペ
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #8a2be2; color: #ffffff;">
ここに文字を入力。
</div>