How to make a border image even?

Question

I added a 1 pixel border to the image. At the same time, I am trying to give a radius to the edges of the image. My problem is that the image is already rounded using Photoshop, the border of the edges looks thinner than it should be

You can check it out here.

http://jsfiddle.net/fVNgA/

How can I make a border even?

img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; } <img src='http://carantina.com/wp/wp-content/themes/new/images/home_pic1.jpg'>​ 

Answer 1

Wrap the image in span and add css to it

http://jsfiddle.net/96wVp/

Answer 2

Add "padding: 1px;" to image styles :)

By the way, here is another thread describing a similar problem, and the reasons for this: CSS-3 property border-radius; Are the corners too pale in Chrome?

Answer 3

Chrome uses square corners for inside borders. Thus, in Chrome you won’t be able to know exactly where, like in Firefox, it uses rounded corners even for internal borders.

Screenshot in Chrome and Firefox

My advice: it is better to enable a common border-radius , and also for Chrome, the fix will add overflow: hidden; and padding: 1px; .

CSS

 img { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* Add this for fallback */ overflow: hidden; /* Hack for Chrome */ padding: 1px; /* Hack for Chrome */ border: 1px solid #000; } 

After chrome hack

Answer 4

The problem is not so much in the border as in how it is applied and in the image you are using. Try to round corners in Photoshop with a radius of 6px and save it as png with a transparent background. What happens, you place a border, then the border actually moves at the angle of the image. Since your jpg and jpg image do not support transparency, your rounded corners have square white corners. Here is an example of your image with a transparent image, not with jpg. http://jsfiddle.net/calder12/fVNgA/6/

The code is only because they will not allow me to publish a script without code ... sometimes it makes sense>. >

 <style>img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; } </style> <img src='http://calderonline.com/images/home_pic1.png'>​