afish674 Posted June 8, 2012 Share Posted June 8, 2012 I have several images on my site that use the border radius property. This works fine. However, I have added a class which adds a white, 3px border around the image. This works fine in IE9 and Firefox but in Webkit browsers the border doesn't work on the corners (it borders the original square path before it has been rounded). Is there a way to fix this? (I tried changing the order the classes appear so that the border radius came before the border class but this made no difference.) Link to comment Share on other sites More sharing options...
afish674 Posted June 18, 2012 Author Share Posted June 18, 2012 https://dl.dropbox.com/u/13032629/Untitled-1.htmlThis link shows the problem, the white line can be seen going through the black border. Link to comment Share on other sites More sharing options...
Ingolme Posted June 18, 2012 Share Posted June 18, 2012 If the browser is doing it that way then there's nothing you can do to fix it.On solution would be to have a <div> or <span> element display as an inline-block and use a background-image instead. You would need to specify the width and height of the image on the element. The image would lose its semantic meaning which means that search engines and machines wouldn't recognize it as an image. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.