Advanced Search

Anti-Aliased CSS CORNER

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Anti-Aliased CSS CORNER</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. </head>
  7. <style>
  8. .c{border:1px solid #333;position:relative;height:50px;width:150px;}
  9. .rb_tl{background:#fff;height:5px;width:5px;overflow:hidden;position:absolute;top:-1px;left:-1px;}
  10. .rb_tl div{height:1px;width:1px;overflow:hidden;position:absolute;background:#333;}
  11. .rb_tr{background:#fff;height:5px;width:5px;overflow:hidden;position:absolute;top:-1px;left:146px;}
  12. .rb_tr div{height:1px;width:1px;overflow:hidden;position:absolute;background:#333;}
  13. .rb_bl{background:#fff;height:5px;width:5px;overflow:hidden;position:absolute;top:46px;left:-1px;}
  14. .rb_bl div{height:1px;width:1px;overflow:hidden;position:absolute;background:#333;}
  15. .rb_br{background:#fff;height:5px;width:5px;overflow:hidden;position:absolute;top:46px;left:146px;}
  16. .rb_br div{height:1px;width:1px;overflow:hidden;position:absolute;background:#333;}
  17. </style>
  18. <body>
  19.     <div class="c">
  20.         <div class="rb_tl">
  21.             <div style="top:4px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  22.             <div style="top:3px;left:1px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  23.             <div style="top:2px;left:1px;"></div>
  24.  
  25.             <div style="top:1px;left:2px;"></div>
  26.             <div style="top:1px;left:3px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  27.             <div style="top:0px;left:4px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  28.  
  29.             <div style="top:3px;left:0px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  30.             <div style="top:0px;left:3px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  31.  
  32.             <div style="top:4px;left:1px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  33.             <div style="top:1px;left:4px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  34.  
  35.             <div style="top:1px;left:1px;filter:alpha(opacity=10);-moz-opacity:0.1;"></div>
  36.             <div style="top:2px;left:2px;filter:alpha(opacity=50);-moz-opacity:0.5;"></div>
  37.         </div>
  38.         <div class="rb_tr">
  39.             <div style="top:4px;left:4px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  40.             <div style="top:3px;left:3px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  41.             <div style="top:2px;left:3px;"></div>
  42.  
  43.             <div style="top:1px;left:2px;"></div>
  44.             <div style="top:1px;left:1px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  45.             <div style="top:0px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  46.  
  47.             <div style="top:3px;left:4px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  48.             <div style="top:0px;left:1px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  49.  
  50.             <div style="top:4px;left:3px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  51.             <div style="top:1px;left:0px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  52.  
  53.             <div style="top:1px;left:3px;filter:alpha(opacity=10);-moz-opacity:0.1;"></div>
  54.             <div style="top:2px;left:2px;filter:alpha(opacity=50);-moz-opacity:0.5;"></div>
  55.         </div>
  56.         <div class="rb_bl">
  57.             <div style="top:0px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  58.             <div style="top:1px;left:1px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  59.             <div style="top:2px;left:1px;"></div>
  60.  
  61.             <div style="top:3px;left:2px;"></div>
  62.             <div style="top:3px;left:3px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  63.             <div style="top:4px;left:4px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  64.  
  65.             <div style="top:1px;left:0px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  66.             <div style="top:4px;left:3px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  67.  
  68.             <div style="top:0px;left:1px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  69.             <div style="top:3px;left:4px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  70.  
  71.             <div style="top:3px;left:1px;filter:alpha(opacity=10);-moz-opacity:0.1;"></div>
  72.             <div style="top:2px;left:2px;filter:alpha(opacity=50);-moz-opacity:0.5;"></div>
  73.         </div>
  74.         <div class="rb_br">
  75.             <div style="top:0px;left:4px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  76.             <div style="top:1px;left:3px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  77.             <div style="top:2px;left:3px;"></div>
  78.  
  79.             <div style="top:3px;left:2px;"></div>
  80.             <div style="top:3px;left:1px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  81.             <div style="top:4px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  82.  
  83.             <div style="top:1px;left:4px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  84.             <div style="top:4px;left:1px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  85.  
  86.             <div style="top:0px;left:3px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  87.             <div style="top:3px;left:0px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  88.  
  89.             <div style="top:3px;left:3px;filter:alpha(opacity=10);-moz-opacity:0.1;"></div>
  90.             <div style="top:2px;left:2px;filter:alpha(opacity=50);-moz-opacity:0.5;"></div>
  91.         </div>
  92.         <div>
  93.             Anti-Aliased CSS CORNER
  94.         </div>
  95.     </div>
  96. </body>
  97. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.