Comments on: Image with rounded corners (using CSS3)

By: Dreiden

Dreiden — Sat, 31 Jul 2010 17:10:33 +0000

@Paul
you can do the same with creating a class for the specific link so your markup will look something like this
Text link

and your css something like this

a.roundedbigbox{
width:300px; //width of your ad
height:250px; //height of your ad
display:block;
border: 2px solid black;
border-radius: 30px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
-webkit-border-radius: 30px;
text-indent:-10000em; // to hide your text version of the link
}

and you can change the border color for hover, visited etc.. like this

a.roundedbigbox:hover{
border: 2px solid red; // just changing the property that you want to change on the link state, everything else is inherited from the initial class styles
}

Hope that helps

- Dre

By: nigeljohnwade

nigeljohnwade — Wed, 21 Jul 2010 12:29:49 +0000

Hmm… Where does the alt text go?

By: Mihai

Mihai — Wed, 21 Apr 2010 11:24:22 +0000

Thanks for sharing the solution.

@Paul, just place an absolutely positioned 100% in width and height link with no text inside the div. That will solve ya problem.

By: Leeds Rumours

Leeds Rumours — Wed, 24 Feb 2010 19:05:05 +0000

Awesome! Was getting the same problem but this solved it. I’ve applied it to my header on my site.

By: Proof of concept: Issues & Fun with CSS3 border-radius

Proof of concept: Issues & Fun with CSS3 border-radius — Thu, 29 Oct 2009 09:19:06 +0000

[...] Here’s another article that describes the same issue. The author also took the trouble to file this as a bug issue. I do think though that the version where the rounded corners are set on the surrounding div, is right, that is, according to the spec and should probably not be fixed. Only in the case that the rounded corners are set on the image itself should the border either go over the image or clip its sharp corners. [...]

By: Paul

Paul — Wed, 14 Oct 2009 03:30:07 +0000

My problem is that I want the images to be links. For ads…

By: Pavol Rusnak

Pavol Rusnak — Fri, 25 Sep 2009 08:06:19 +0000

@hugh
Use the appropriate issues I mentioned at the bottom in Update #1 and report the problems there. I think these Developers don’t read comments in my blog

By: hugh

hugh — Thu, 24 Sep 2009 21:38:49 +0000

I just checked this with FF 3.5.3 and it still has the img square corners over the rounded corners of the border. I also checked it in Safari 4.0.2 and it has the corners rounded but it chops of the 2px border around the edges. I would expect the border to follow the corners all the way round like the div example does.

By: JonusC

JonusC — Sat, 29 Aug 2009 09:27:53 +0000

Thanks a lot for this info Pavol. I spent hours finding a good method to add rounded Facebook-like corners to a template for the JoomlaComment extension I am creating – I tried the JavaScript/JQuery methods (way too much overhead) and simple PNG-overlay graphics (doesn’t work well with transparent backgrounds), and despite this being a Draft-CSS3 implementation this is definately the best way to go (too bad IE users). Only your blog had the simple example code to make it happen!

P.S. For the ‘Facebook like’ corners (just a chop-off) a border of 0px transparent works well. Thanks again!

By: Rob H

Rob H — Fri, 28 Aug 2009 06:29:02 +0000

I’ve been working on a javascript image rotator and ive gone back and forth between using div + background image and just a regular img. As much as I would like to be able to round the top corners on my little slideshow, I can’t get it to work on images placed with an img tag. If I use a div background I can round the corners but I lose access to the img tag’s “.complete” feature that allows me to check if an image has fully downloaded before I try to manipulate it. Unless theres another way to check to see if a background image has completed download, I’m going to have to say that making the script better able to deal with slow connections is probably more important than round corners. Especially since support for radius is still lacking in some browsers. I’m open to suggestions though.