CSS border-radius

Question

<style>
  div {border-radius:5px;background:#cccccc;}
  span {display:block;}
</style>

<div>
    <span>First line</span>
    <span>Second line</span>
</div>

I want each span to fit inside the div with rounded corners, but they go in front of the div and obscure the rounded corners. If I put rounded corners on each span then you can see a faint outline of each span, even if they have the same background-color as the div.

Answer 1

try overflow:hidden on the div? or give it a z-index of 1000

Answer 2

alternative to @AlexC's answer:

<style>
  div {border-radius:5px;background:#cccccc;}
  span {padding:0px 5px;display:block;}
  .topspan {padding:5px 5px 0px 5px;display:block;}
  .bottomspan {padding:0px 5px 5px 5px;display:block;}
</style>

<div>
    <span class="topspan"></span>
    <span>First line</span>
    <span>Second line</span>
    <span class="bottomspan"></span>
</div>

see here