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