rounded corners without images - valid xhtml/css

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

when ie fix is placed in conditionally commented stylesheet this provides a cross-browser valid implementation of rounded corners. It's limited to a corner radius of 2 pixels and doesn't anti alias but uses structurally semantic html

Copy this code and paste it in your HTML
  1. css:
  2. ul.qcorners {
  3. list-style-position: outside;
  4. list-style-type: none;
  5. font-family:Arial, Helvetica, sans-serif;
  6. font-size:1.3em;
  7. width:33%;
  8. }
  9. ul *{zoom:1;position:relative;}/*ie fix*/
  11. .qcorners li{border:solid 1px #666;border-top:1px solid #666;margin-bottom:6px;}
  12. .qcorners a{background:#ccc;display:block;margin:-2px 0;border-top:1px solid #666;border-bottom:1px solid #666;text-decoration:none;color:#CC0000;}
  13. .qcorners strong{background:#ccc;display:block;margin:-2px 1px;border-top:1px solid #666;border-bottom:1px solid #666;padding:5px;}
  14. .qcorners a:hover,.qcorners a:hover strong{background:#fff;}
  15. -->
  17. html:
  19. <ul class="qcorners" >
  20. <li><a href="#"><strong> some text </strong></a></li>
  21. <li><a href="#"><strong> another item</strong></a></li>
  22. <li><a href="#"><strong> all lists and link tags... </strong></a></li>
  23. <li><a href="#"><strong> with a little strong </strong></a></li>
  24. <li><a href="#"><strong> stretches in 2 directions </strong></a></li>
  26. </ul>


Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.