CSS rounded corner effect, 2 Examples

1. You can cut the image into four or two. For example

2.Code

Html

 <  Div   Class  = "Box"  >      <  Div   Class  = "Outer"  >          <  Div   Class  = "Inner"  >              <  H2  > Headlines </  H2  >              <  P  > Content, fdascot <  BR   /> Content, fdascot <  BR   /> Content, fdascot <  BR   /> Content, fdascot <  BR   />             </  P  >          </  Div  >  </  Div  >  </  Div  >  <  Div   Class  = "Box2"  >  <  Div   Class  = "Outer2"  >  <  Div   Class  = "Inner2"  >         <  H2  > Headlines </  H2  >         <  P  > Content, fdascot <  BR   /> Content, fdascot <  BR   /> Content, fdascot <  BR   /> Content, fdascot <  BR   />              </  P  >   </  Div  >  </  Div  >  </  Div  > 

CSS

. Box {Background: URL (images/bottom_left.gif) No-repeat left bottom; width: 300px ;}. outer {Background: URL (images/bottom_right.gif) No-repeat right bottom; padding-bottom: 5% ;}. inner {Background: URL (images/top_left.gif) No-repeat left top; padding-left: 20px ;}. inner H2 {Background: URL (images/top_right.gif) No-repeat right top; padding-top: 5% ;}. box2 {Background: URL (images/corner-left.gif) No-repeat left bottom; width: 300px ;}. outer2 {Background: URL (images/corner-right.gif) No-repeat right bottom; padding-bottom: 5% ;}. inner2 {Background: URL (images/corner-left.gif) No-repeat left top; padding-left: 20px ;}. inner2 H2 {Background: URL (images/corner-right.gif) No-repeat right top; padding-top: 5% ;}
 

3. Final Results