16 Apr, 2009

1 pixel ronde hoeken

Categoriën: Images | Round corners | Xhtml Strict | box | crossbrowser | template

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;
}

Gerelateerde Snippets

Geen reakties op "1 pixel ronde hoeken"

Reaktie formulier


Demo: 1 pixel ronde hoeken:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.