Runde Ecken mit CSS und JavaScript

By Olaf Waltersdorf

Ab und zu will man (oder die Designer) ja abgerundete Ecken haben. Normalerweise artet das in Fummel-Arbeit aus, gerade um es Cross-Browser fähig zu machen. Eine weitere, wie ich finde sehr elegante Lösung, ist folgendes JavaScript:

http://www.ruzee.com/blog/shadedborder

Per Parameter kann man die Rundung, den Schatten und die Linienbreite bestimmen. Per CSS noch die Farben und alles andere Sehr einfach einzubauen und basiert ausnahmsweise nicht auf einem Framework, ist aber mit diesen Kompatibel.

NACHTRAG

Ein interessanter Firefox-Bug hat mich fast in den Wahnsinn getrieben – ich habe obiges JS verwendet und eine türkise Box erzeugt. In diese Box habe ich eine weisse Box getan, also zweimal runde Ecken. Dann in die Weisse das month-small template der cal-Extension für Typo3 – und im Firefox hat z.B. .month.small td { border:1px solid red} nicht mehr funktioniert, es waren keine Border mehr zu sehen. Die Lösung war, die Background-Color der td und th auf transparent zu setzen oder einfach die Anweisung wegzulassen. Falls es mal irgendjemanden ebenfalls passiert