<span
style="border: 9px solid #00bd00;">
上のsolidをdoubleに変えてみると
<span style="border: 9px double #00bd00;">ちんぷる</span>
↓
ちんぷる
こうなります
dottedに変えた場合はこう
↓
ちんぷる
dashedに変えた場合はこうなります
↓
ちんぷる
ほかにもこれぐらいあります
inset
outset
ridge
groove
none
hidden
<span style="background:#ff00ff; padding: 3px; border: 8px outset #000000; border-radius: 4px;">ちんちんぷるぷる</span>
↓
ちんちんぷるぷる
<span style="background:#a1a1a1; padding: 3px; border: 4px dashed #fff9ed; border-radius: 20px;">ちんちんぷるぷる</span>
↓
ちんちんぷるぷる
背景をグラデーションにしたい
background:linear-gradient(0deg, #000000, #000000)を足します
これが
<div style="background:linear-gradient(0deg, #00bd00, #ff00ff); padding:10px;">ちんぷる</div>
こうなります
↓
ちんぷる
<span style="background:linear-gradient(260deg, #ffffff, #ff88ff);border: 5px outset #000000; border-radius: 6px; padding:10px;">ちんぽこちいさいおちんちん</span>
↓
ちんぽこちいさいおちんちん