Posted By

realko on 10/02/10


div browser transparency safari Opera Firefox konqueror ie6 corners box border ROUNDED ie5 ie7 chrome transparent container IE8 cross ff radius outsides sleipnir maxton

Versions (?)

Who likes this?

1 person have marked this snippet as a favorite


cross browser css based transparent rounded corners

 / Published in: CSS


Rounded corners div box with outsides transparency.\r\nCross browser compatibility checked for:\r\n•ie5,ie6,ie7,ie8\r\n•ff,firefox\r\n•opera\r\n•safari\r\n•chrome\r\n•sleipnir\r\n•maxton\r\n•konqueror

  1. .br_box{width:400px; margin:auto; padding:10em 0 20em 0;}
  2. .br_box3{background-image: url("/images/br-left-top.png"); background-repeat: no-repeat; background-position: top left;}
  3. .br_box2{background-image: url("/images/br-right-top.png"); background-repeat: no-repeat; background-position: top right;}
  4. .br_box1{background-image: url("/images/br-left-bottom.png"); background-repeat: no-repeat; background-position: bottom left;}
  5. .br_box0{ padding:20px 0; background-image: url("/images/br-right-bottom.png"); background-repeat: no-repeat; background-position: bottom right;}
  6. .br_y{position:relative; min-height:60px; margin:auto; padding:0 20px; border:1px solid #00f; background:#00f;}
  7. .br_x{position:relative; min-height:60px; margin-top:-21px; margin-bottom:-21px; padding:20px 0 20px 0; border:1px solid #00f; background:#00f;}

Report this snippet  

You need to login to post a comment.