CSS3 - Rand mit abgerundeten Ecken bei einem Bild = Rand wird vom Bild überlagert

[Chris87]

Hallo,

ich habe bei einer Seite fast komplett auf den Einsatz von Bildern für das Layout verzichtet, da man nun mit CSS3 ja auch Veräufe und Ränder mit abgerundeten Ecken definieren kann.
So habe ich z.B. vielen Bildern (z.B. für eine Galerie-Vorschau) Ränder mit abgerundeten Ecken per CSS zugewiesen. Das Problem ist allerdings, dass in Browsern wie Chrome oder Safari der Rand an den Ecken durch das Bild überlagert wird.

Hier ein Bild zur Verdeutlichung:


Kann man das irgendwie umgehen?

Danke.

Gruß
Christoph

[tblumrich]

Welchem Element hast du die Abrundung mitgegeben? Liegt das Bild im Hintergrund? Grafiken werden natürlich nur mit abgerundet, wenn sie als Hintergrund eingebunden sind... das sollte aber in allen Browsern gleich sein.

Gruß
Thomas

[RainerG]

Du musst dem IMG-Tag des Bildes die runden Ecken geben, hier kannst Du auch gleich einen Rahmen festlegen. Die Bilder, die runde Ecken haben sollen, sollten dann alerdings in eine bestimmte Klasse gekapselt werden, damit ggf. nicht alle Bilder runde Ecken bekommen (wenn das nicht über all erwünscht ist).

[NoName26]

Genau wie mein Vorredner sagte: gib dem img-Tag die runden Ecken. Hier mal ein Beispiel, bei dem wir genau das gemacht haben.

[dieselboy]

Hallo Chris87,

ich habe mich in meinem Blog auch schon mit der Thematik beschäftigt. Vielleicht hilft dir das weiter.


Viele Grüße
Daniel