Advanced Search

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

Expand | Embed | Plain Text

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*/
  10.  
  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. -->
  16.  
  17. html:
  18.  
  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>
  25.  
  26. </ul>

URL: http://vitaminkdesign.com/blog/2008/10/20/rounded-corners-without-images/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.