CSS trik: Zaoblení rohů elementu o 1px a 3px bez použití obrázků

Dnes pro vás mám dvě užitečné CSS třídy, které můžete s drobnými úpravami hromadně používat ve vašich projektech. Je určen hlavně do prostředí, kde nemůžeme spoléhat na podporu CSS3. Bez dalšího dlouhého vysvětlování...

Chcete-li zaoblit rohy elementu o 1 pixel, přiřaďte mu třídu rounded-corner-1 , která je definována takto:

.rounded-corner-1 {
    display: inline-block;
    background: #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

.rounded-corner-1:before{
    border-top: 1px solid #fff;
    padding-top: 1px;
    display: block;
    content: " ";
    position: relative;
    top: -1px;
}

.rounded-corner-1:after{
    border-bottom: 1px solid #fff;
    padding-bottom: 1px;
    display: block;
    content: " ";
    position: relative;
    top: 1px;
}

Chcete-li zaoblit rohy elementu o 3 pixely, přiřaďte mu třídu rounded-corner-3 , která je definována takto:

.rounded-corner-3 {
    display: inline-block;
    background: #fff;
    border-left: 2px solid #ddd;
    border-right: 2px solid #ddd;
    position: relative;
    z-index: 2;
}

.rounded-corner-3:before{
    width: 100%;
    height: 100%;
    padding: 0 0 2px 0;
    border: 1px solid #ddd;
    border-left:0;
    border-right:0;
    display: block;
    content: " ";
    z-index: -1;
    position: absolute;
    top: -2px;
    bottom: 0px;
}

.rounded-corner-3:after{
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-left:0;
    border-right:0;
    padding: 0 2px 0 0;
    display: block;
    content: " ";
    z-index: -1;
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: 0px;
}

Jak vidíte, zaoblení o 3px potřebuje trochu více kódu, ale výsledek stojí za to.

Demo pro 1px: http://jsfiddle.net/marakoss/FRsG6/

Demo pro 3px: http://jsfiddle.net/marakoss/S7Pdp/

Obě verze fungují od IE8 (kvůli absenci podpory pseudoelementů :before a :after)

Doufám, že vám tento trik ušetří mnoho času.