CSS Problem with rounded corners in chrome

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
johnsdk
Forum Newbie
Posts: 2
Joined: Sat Jul 30, 2011 11:46 am

CSS Problem with rounded corners in chrome

Post by johnsdk »

hello , i have been trying to create a sort of image slideshow. the problem is that in firefox it displays correctly
with rounded corners , but in chrome the rounded corners ( using css3 ) are being 'hidden' at the back although it is there .
here's a demo of my work :
http://anisa.me/work/
Any help would be highly appreciated .
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS Problem with rounded corners in chrome

Post by pickle »

Firefox & Chrome use different rendering agents. Apparently Firefox's Gecko engine clips images to be inside rounded borders, while Chrome's Webkit engine does not.

I did a Google search for "Webkit round borders clip content" & the first result looked promising at a glance: http://clagnut.com/blog/2273/
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
exes
Forum Newbie
Posts: 1
Joined: Wed Aug 31, 2011 8:17 am

Re: CSS Problem with rounded corners in chrome

Post by exes »

chrome css3 uses the webkit prefix so your chrome should be something like
-webkit-border-radius:6px;
oggame2
Forum Newbie
Posts: 1
Joined: Fri Apr 13, 2012 6:50 am

Re: CSS Problem with rounded corners in chrome

Post by oggame2 »

You can take a glance at excellent Thumbnailer library to easily create rounded thumbnails.
Post Reply