16 Apr, 2009
1 pixel ronde hoeken
Categoriën: box |crossbrowser |Images |Round corners |template |Xhtml Strict
Zoals te zien bij Google Analytics, één pixel uit de hoek halen om zo visueel ronde hoeken na te bootsen.
HTML
<ul>
<li>
<a href="#">
<strong>
<strong>
Visitors
</strong>
</strong>
</a>
</li>
</ul>
CSS
ul {
list-style: none;
}
ul li {
width: 100px;
}
li a {
display:block;
border: solid #666;
border-width: 0 1px;
text-decoration: none;
outline:none;
color: #000;
background-color: #e4e4e4;
}
li a strong {
display: block;
position:relative;
top: -1px;
left: 0;
border:solid #666;
border-width:1px 0 0;
font-weight:normal;
}
li a strong strong {
border-width:0 0 1px;
top: 2px;
padding:5px;
}
li a:hover {
background-color: #aaa;
}