rounded corners 1 image

by kuyabiye

HTML

<div style="border: 1px solid #000; margin: 0 0 20px" class="clearfix">

<div class="grid-1">
<div class="box">
    
    <div class="content">
    testttt <br />
    testttt <br />
    testttt <br />
    testttt <br />
    testttt <br />
</div>
<div class="bg">
    <div class="tl"></div>
    <div class="tm"></div>
    <div class="tr"></div>
    <div class="ml"></div>
    <div class="mr"></div>
    <div class="bl"></div>
    <div class="bm"></div>
    <div class="br"></div>    
</div>
    
</div>
</div>
<div class="grid-1">
<div style=" background: #fff;  border-radius: 10px; box-shadow: 0 0  5px rgba(150, 150,150, 0.9); border: 1px solid #f3f3f3;">
  <div style="padding: 15px">
    testttt <br />
    testttt <br />
    testttt <br />
    testttt <br />
    testttt <br />
  </div>
</div>
</div>
</div>

<div class="box-wrapper">
<div class="box">
    
    <div class="content">
    testttt <br />
    testttt <br />
    testttt <br />
    testttt <br />
    testttt <br />
</div>
<div class="bg">
    <div class="tl"></div>
    <div class="tm"></div>
    <div class="tr"></div>
    <div class="ml"></div>
    <div class="mr"></div>
    <div class="bl"></div>
    <div class="bm"></div>
    <div class="br"></div>    
</div>
    
</div>
</div>

testtest

CSS

/* box-wrapper için border: 1px solid transparent; */

body { padding: 20px }

.box-wrapper {
    
    /* eiter use float:left; width: 100% */
    padding-top: 1px;
    margin-top: -1px;
}

.grid-1 {
 float: left;
  margin-left: 20px;
width: 200px;    
}
.box {
    
    /*background: #f3f3f3;*/
    position: relative;
    margin: 11px;
    padding: 5px; /* important make negative margin works on .content when box is not floating, must be 1px min */
    zoom: 1;
}


.box .content {
    background: #fff;
 /*  margin: -9px; */
position: relative;
 z-index: 2;   
    zoom: 1; 
}

.box .bg > div { 
  background-image: url(http://dl.dropbox.com/u/6696146/cdn/rounded-corner.png);
}

.bg .tl,
.bg .tr {
width: 15px;
 height: 15px;
position: absolute;
 top: -15px;   
}

.bg .tl {
 background-position: -54px 0;
 background-repeat: no-repeat;
 left: -15px;   
}

.bg .tr {
 background-position:100% 0 ;
 background-repeat: no-repeat;
    right: -15px;   
}

.bg .tm {
  background-position: -100px 0;
 background-repeat: no-repeat;   
 position: absolute;
 top: -15px;
 left: 0;
   width: 100%;
  height: 15px;
    
}

.bg .ml {
 width: 15px;
position: absolute;
height: 100%;
    background-repeat: repeat-y;
    background-position: -2px 0;
    position: absolute;
    top: 0;
    left: -15px;
}

.bg .mr {

 width: 15px;
position: absolute;
height: 100%;
    background-repeat: repeat-y;
    background-position: -36px 0;
    position: absolute;
    top: 0;
    right: -15px;
}


.bg .bl,
.bg .br {

width: 15px;
 height: 15px;
position: absolute;
 bottom: -15px;   
}

.bg .bl {
     background-position: -54px -36px ;
 background-repeat: no-repeat;
    left: -15px;   
}

.bg .br {
     background-position: 100% -36px ;
 background-repeat: no-repeat;
    right: -15px;   
}

.bg .bm {
    background-repeat: repeat-y;
    background-position: -70px -36px;
 position: absolute;
 bottom: -15px;
 left: 0;
   width: 100%;
  height: 15px;
    
}

/*
 * Contain floats: h5bp.com/q
*/
.clearfix {
...