Rounded, shaded corner box with minimum div tag

ปกติเวลาเราทำ rounded box ด้วย css จะพบว่า
ตัว content ที่เราใช้ถึงแม้จะเอาส่วน presentation ออกไปแล้ว
ก็ยังอุดมไปด้วย div block อยู่ดี (แถมยังไม่ค่อยสื่อความหมายเท่าไรด้วย)
ตัวอย่าง

<div class="cb">
  <div class="bt"><div></div></div>
  <div class="i1">
    <div class="i2">
      <h1>title go here</h1>
      <p>xxxxx</p>
    </div>
  <div class="bb"><div></div></div>
</div>

มีอีก idea หนึ่งก็คือเปลี่ยนไปใช้ javascript
ให้เป็นคน insert tag พวกนี้แทน
จากตัวอย่างข้างบน ก็จะลดรูปเหลือแค่

<div class="cbb">
  <h1>title go here</h1>
  <p>xxxx</p>
</div>

จากนั้นเมื่อเวลาที่ browser load ไป
ตัว javascript ก็จะจัดการแทรก div tag
เพิ่มเติมให้เรา

อย่างนี้สิ ค่อยดู simple หน่อย (เฉพาะใน
content)

ดูบทความที่พูดถึงเรื่องนี้ที่
Transparent custom corners and borders