[CSS] Create rounded corners with pure CSS

Today, I found a rounded corner demo written in pure CSS in my previous favorites during File Sorting. I would like to share it with you.

 <!  Doctype html  >  <  Html  Lang  = "En-us"  >  <  Head  >      <  Meta  Charset  = "UTF-8"  >     <  Title  > CSS rounded corner </  Title  >      <  Style  Type  = "Text/CSS"  >  # Xsnathh1, # xsnathh2, # xsnathp  {  Margin  : 0 10px  ;  Letter-spacing  :  1px  ;  }  # Xsnathh1  {  Font-size  :  2.5em ;  Color  :  # Fff  ;  }  # Xsnathh2  {  Font-size  :  2em  ; Color  :  # 06a  ;  Border  :  0  ;  }  # Xsnathp  {  Padding-bottom :  0.5em  ;  }  # Xsnathh2  {  Padding-top  :  0.5em  ;  }  # Xsnail bait {  Background  :  Transparent  ;  Margin  :  1em  ;  }  . Xtop,. xbottom  { Background  :  Transparent  ;  Font-size  :  1px  ;  }  . Xb1,. XB2,. xb3,. xb4  { Overflow  :  Hidden  ;  }  . Xb1,. XB2,. xb3  {  Height  :  1px  ;  } . XB2,. xb3,. xb4  {  Background  :  # Ccc  ;  Border-left  :  1px solid # 08c  ;  Border-Right :  1px solid # 08c  ;  }  . Xb1  {  Margin  :  0 5px  ;  Background  : # 08c  ;  }  . XB2  {  Margin  :  0 3px  ;  Border-Width  :  0 2px ;  }  . Xb3  {  Margin  :  0 2px  ;  }  . Xb4  {  Height :  2px  ;  Margin  :  0 1px  ;  }  . Xboxcontent  {  Background  : # Ccc  ;  Border  :  0 solid # 08c  ;  Border-Width  :  0 1px  ;  }      </ Style  >  </  Head  >  <  Body  >      <  Div  ID  = "Xsnail bait"  >          <  Div  Class  = "Xtop" >              <  Div  Class  = "Xb1"  > </  Div  >              <  Div  Class  = "XB2"  > </  Div  >              <  Div Class  = "Xb3"  > </  Div  >              <  Div  Class  = "Xb4"  > </  Div  >          </  Div  >          <  Div Class  = "Xboxcontent"  >              <  H1  > Snail bait borders </  H1  >              <  P  > Based on nifty corners by Alessandro fulciniti <  BR  /> Http://pro.html.it/esempio/nifty/</  P  >              <  H2  > Rounded borders without images </  H2  >              <  P  > Lorem ipsum dolor sit Amet, consectetuer adipiscing elit, sed diam nonummy nibheuismod tincidunt ut laoreet dolore Magna aliquam erat volutpat. ut wisi enimad minim veniam, Quis nostrud exerci tation ullamcorper suscipit lobortis nislut aliquip ex EA commodo consequat.</  P  >              <  P  > DUIs autem vel Eum iriure dolor in hendrerit in vulputate Velit esse molestie consequat, vel illum dolore EU region nulla facilisis at Fig. </  P  >          </  Div  >          < Div  Class  = "Xbottom"  >              <  Div  Class  = "Xb4"  > </  Div  >              <  Div  Class  = "Xb3"  > </  Div >              <  Div  Class  = "XB2"  > </  Div  >              <  Div  Class  = "Xb1"  > </  Div  >          </  Div >      </  Div  >  </  Body  >  </  Html  > 

PS: Use border-radius for rounded corners.