Advanced Search

Return to Snippet

Revision: 9439
at November 6, 2008 06:05 by vitamink
Initial Code 
css:
ul.qcorners {
	list-style-position: outside;
	list-style-type: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.3em;
	width:33%;
}
ul *{zoom:1;position:relative;}/*ie fix*/

.qcorners li{border:solid 1px #666;border-top:1px solid #666;margin-bottom:6px;}
.qcorners a{background:#ccc;display:block;margin:-2px 0;border-top:1px solid #666;border-bottom:1px solid #666;text-decoration:none;color:#CC0000;}
.qcorners strong{background:#ccc;display:block;margin:-2px 1px;border-top:1px solid #666;border-bottom:1px solid #666;padding:5px;}
.qcorners a:hover,.qcorners a:hover strong{background:#fff;}
-->

html:

<ul class="qcorners" >
<li><a href="#"><strong> some text </strong></a></li>
<li><a href="#"><strong> another item</strong></a></li>
<li><a href="#"><strong> all lists and link tags... </strong></a></li>
<li><a href="#"><strong> with a little strong </strong></a></li>
<li><a href="#"><strong> stretches in 2 directions </strong></a></li>

</ul>
Initial URL 
http://vitaminkdesign.com/blog/2008/10/20/rounded-corners-without-images/
Initial Description 
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
Initial Title 
rounded corners without images - valid xhtml/css
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS