Rounded Corners

Brief explanation on how to achieve rounded corners

HTML

<script src="http://f.cl.ly/items/90e1d8da49d7152f16d2/curvycorners.js"></script>
<div id="caixa-1" class="box">Caixa 1</div>
<div id="caixa-2" class="box">Caixa 2</div>
<div id="caixa-3" class="box">Caixa 3</div>

CSS

.box{
    width: 200px;
    height: 50px;
    margin: 10px;
    background-color: #999;
    /* estas linhas já são mariquices não ligues =P */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #444;
    text-shadow: 0 1px 0px #ccc;
    text-align: center;
    line-height: 3em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    /* fim das mariquices =) */
}


.box:hover{
    background-color: #FF5E99;
    color: #BB1A66;
    cursor: pointer;
    /* Se quiseres aplicar um :hover na Caixa-1 tens de mudar de imagem, ou deslocar a sprite, conforme a técnica que utilizes... 
    Como podes ver na Caixa-3, terás também problemas com o javascript, pelo que terás de criar mais uma função para carregar a cor certa*/
}

#caixa-1{
    background-image: url('http://cl.ly/2mWA/content');
    background-repeat: no-repeat;
    background-color: transparent;
    /* Descomenta estas linhas para veres o problema deste metodo */
    /*
    width: 100px;
    height: 50px;
    */
}

/*
Abre no IE para veres o problema deste metodo
*/
#caixa-2{
    border: 1px solid transparent;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

JavaScript

var settings = {
    tl: {radius: 15},
    tr: {radius: 15},
    bl: {radius: 0},
    br: {radius: 15},
    antiAlias: true
}

curvyCorners(settings, "#caixa-3");

/*
#1 - Estou a incluir um ficheiro de javascript externo, que tens de chamar, antes de correres o código aqui de cima.
(http://f.cl.ly/items/90e1d8da49d7152f16d2/curvycorners.js)

#2 - As desvantagens deste metodo só se tornam óbvias quando usas demasiados cantos arredondados, em que a página fica lenta.

#3 - Por outro lado este método não compensa, quando só tens uma caixa com cantos redondos.
*/