Przykład czwarty: z zaokrągleniami i bez

W przykładzie dobrałem dwa bloki tej samej klasy. W pierwszym nie ma żadnych dodatkowych reguł CSS. Drugi jest niepowtarzalnym elementem wyróżnionym za pomocą selektora identyfikatora. Przykład pokazuje, jak wyglądają Nifty Corners z krawędziami (obwódkami). Zastosowano dwa odwołania do funkcji Rounded, aby otrzymać różne zaokrąglenia u góry i u dołu.

Rounded("div#nifty","top","transparent","#FFC5FF","border #C0C0C0");
Rounded("div#nifty","bottom","transparent","#F0F0E7","small border #C0C0C0");

Aby nagłówek miał inne tło niż tekst, umieściłem dwa elementy potomne w bloku z małymi zaokrąglonymi narożnikami.

Drobna uwaga dotycząca stosowania obwódki (krawędzi): skrypt akutomatycznie dodaje pionowe linie do elementów potomnych umieszczonych bezpośrednio w elemencie nadrzędnym (z zaokrąglonymi narożnikami), aby uniknąć deklarowania ich w CSS i umożliwić lepszy efekt w przypadku, gdy JavaScript jest wyłączony i realizowane są tylko dyrektywy CSS.

Tak więc, jeśli otrzymujesz nienajlepszy efekt zastosowania obwódki, najprostszą drogą jest umieszczenie elementów w dodatkowym bloku ze wszystkimi zaokrąglonymi narożnikami.

Sugeruję skorzystanie z tego rozwiązania także wówczas, gdy element z zaokrąglonymi narożnikami zawierać będzie więcej elementów potomnych, ponieważ skrypt zajmuje czas procesora na dodanie pionowych linii obwódki.