Pure CSS rounded corners without images and javascript

<style type="text/css">
 
    .container {
        display: block;
    }
 
    .content {
        background: #ccc;
    }
 
    .round_span3 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 3px;
    }
 
    .round_span2 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 2px;
    }
 
    .round_span1 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 1px;
    }
</style>
<div class="container">
    <span class="round_span3"></span>
    <span class="round_span2"></span>
    <span class="round_span1"></span>
    <div class="content">
        <!-- Content goes here --> My name is Bond
        <br/>
        James Bond
    </div>
    <span class="round_span1"></span>
    <span class="round_span2"></span>
    <span class="round_span3"></span>
</div>