Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fluid transparent round corners - no images required</title>
<style type="text/css">


* {
    margin:0;
    padding:0
}
p {
    margin:0 0 
}



body {
    padding:10px;
    background:url(images/bgstripe.gif)
}
.test {
    float:left;
    margin:10px;
    display:inline;
    clear:both;
}
.content {
    background:#ccc;
    border-left:1px solid blue;
    border-right:1px solid blue;
    padding:1px 5px;
    overflow:hidden;
}
.test b {display:block}
.top *, .bottom * {
    padding:1px 0 0;
    background:#ccc;
    border-right:1px solid blue;
    border-left:1px solid blue;
    font-size:0;
}
.px0 {
    margin: 0 5px;
    background:blue;
}
.px1 {
    margin: 0 3px;
    border-width:2px;
}
.px2 {margin:0 2px;}
.px3 {
    margin: 0 1px;
    padding:2px 0 0;
}
.px4 {
    margin: 0 1px;
    padding:2px 0 0;
}
.fl, .fr {
    float:left;
    width:60px;
    height:40px;
    border:1px solid #000;
    margin:2px;
    display:inline;
    background:red;
    text-align:center;
}
.fr {float:right}
.test2 {width:50%}
.clear {clear:both}


</style>


<!--[if lte IE 7]>
<style type="text/css">
.content{display:inline;zoom:1.0}
</style>
<![endif]-->

</head>
<body>


<div class="test">


    <div class="top"><b class="px0"></b><b class="px1"></b> <b class="px2"></b> <b class="px3"></b> </div>



    <div class="content">
        <p>This item has no width and is stretched
            by the content it contains.</p>
    </div>
    <div class="bottom"><b class="px3"></b> <b class="px2"></b> <b class="px1"></b> <b class="px0"></b></div>
</div>



</body>
</html>
The output of the code above is at http://dot.kr/x-test/layout/002_1.php.
I like to modify the contents like the belelow.
Code:
before modifying
<p>This item has no width and is stretched
      by the content it contains.</p>

after modifying
<p>This item has no width and is stretched
      by the content <b>it</b> contains.</p>
The result of the code above is at http://dot.kr/x-test/layout/002_2.php.
You can see the line breaks before and after it.

I like to make the text "it" bold by using <b> tag like the code above without any line breaks before and after the text "it".