background: #ffffff;
(背景の色)

padding: 6px;
(余白)

border: 3px solid #00bd00;
(枠線の太さと色)

margin-bottom: 20px;
(連続して並べた時の下の間隔)

border-radius: 20px;
(角の丸み)

box-shadow: 0 3px 0 0
(影。左から上・右・下・左の順でpx数を設定してください)


これらを

<div style="">
↑これの" "の中にぶち込みます



<div style="background: #ffffff; padding:6px; border: 9px solid #00bd00; border-radius: 20px;">金玉</div>


↑これが
↓こうなります




border-radiusを3pxにしたもの
↓





<div style="background:#ffffff; padding: 6px; border: 0px solid #ff0000; border-radius: 20px; box-shadow: 0 5px 5px 0 #ff0000, 0 8px 8px 0 #000000; color:#ff00ff;">いんぽ</div>

↓





こんな長いのいらん！文字の後ろだけがいい！という人はdivをspanに変えましょう

<span style="background:#ff0000; padding: 6px; border: 3px solid #00bd00; border-radius: 20px; box-shadow: 0 3px 3px 0;">スイカ～☆</span>

↓

スイカ～☆


短いやつを真ん中に置きたい場合は、spanの前にcenterを付けておきましょう


<center>
<span style="background:#ff00ff; padding: 6px; border: 0px solid #000000; border-radius: 20px; box-shadow: 0 5px 5px 0 #000000, 0 10px 10px 0 #0a0a0a; color:#ffffff">いんぽ</span></center>




いんぽ