The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn’t display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image. Thanks to Darcy Clarke for the jQuery code which does the magic tag wrapping automatically.
My goal to use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot below.
The problem is none of the modern browsers display rounded corners image the way I want it. Webkit does display the rounded corners, but the inset box shadow is not supported. In Firefox, the border-radius doesn’t even display at all.
The trick is very simple: wrap a span tag around the image element. Specify the original image as background-image. To hide the original image, specify opacity:0 or display:none. I find using the opacity method is a better approach because the image will remain available for copy or download.
To make things easier, we can use jQuery to automatically wrap a span tag around the image.
The jQuery code below will find any element with ".rounded-img" or "rounded-img2" (in my case, it is the image element) and wrap it with a span tag. The script finds the src, width, height, and CSS class attribute of the original image and apply them as inline styling in the span tag. Then it specifies the opacity of the image to 0 to hide it.
It works with any image dimension (with or without the width and height attribute). It can also be combined with other CSS classes. No additional markup is required.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".rounded-img, .rounded-img2").load(function() {
$(this).wrap(function(){
return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
});
$(this).css("opacity","0");
});
});
</script>
I hope you will find this trick useful. For example, you can use it to style your blog’s avatar or profile photos.
Thanks to Darcy Clarke for the jQuery code.
Eric D. Greene
Fantastic – great tip thanks
Unique Design
Absolutely useful!
Thanks Nick! As always you’ve gifted us with a great tip!
Dave
Sweet!
slaws
Don’t work corectly with inset box-shadow on Chrome (Windows)
Milos Milikic
Great! Thanks for sharing!
Joffrey
Well done!
This problem gave me headaches with Firefox.
Jason
I’ve had a need for something like this before and remember having to use similar techniques to get it to work before, however this makes it much easier. This might work well with a conditional to keep it from applying the shadow to Chrome on Windows, as that’s my only real concern with the technique – not having the shadow is fine, but the shadow making it look like the image is sitting on a grey box bothers me – frankly in Chrome/Win I’d almost rather see just a square image if there is a square shadow behind it anyway.
I do love the technique though, and hopefully Chrome will have better support for something like this in the future – by the way, has anyone checked this out in an IE9 preview to see if it will be supported there?
Chris
Thank you so much for this! This is great, but wouldn’t it be so great if IE would catch up with the times? I know that IE9 is supposed to be like awesome, but I will believe it when I see it, and you still have to be backwards compatible, although I have recently become a big fan of saying you know what…I am going to give those people a little aesthetic treat if they use FF or a webkit browser! Thanks for this though!
peeper
Don’t work the inset box-shadow on Chrome (win)
Nick La
As mentioned in the demo page, inset box-shadow doesn’t display properly on Windows Chrome. It is a bug.
kumar
IE has plans to support CSS3 sometime in 2014.
Rilwis
Nice tutorial. The trick is simple but really useful. Thanks for sharing.
Tommie Hansen of Byme
50% of visitors won’t see fancy CSS3-stuff so all these CSS3 things feel quite unnecessary. :f
Beben
so smooth on Mozilla FF 3.6
Hannes
i disagree with Tommie, if you let it degrade it nice, I find myself using CSS3 more and more in can-do-but-dont-have-to Situations
Steve
Have you considered adding ie-css3.htc to this package to get IE to work with it too?
Toby
Wonderful! Love the inset one. Ran into this problem a while ago, nice solution! :)
Chad
Awesome effect! I’ve been using similar methods to fix those rounded corners when using the CSS3 rounded corners.
Rolf
Very nice Article, thanks for sharing it :-)
Calvin Tennant
I really like this.
Abraam
Very cool! Thanks for sharing.
Paul Irish
Using jQuery to accomplish something that…. umm.. trivial in CSS and HTML seems like a poor idea.
Just looking at the before code (the html) and the after (the jQuery) is revealing enough. You’re now using 3x as much code, and you’re going to give all your users a flash of unstyled text.
:(
Zac
Did you try this?
-moz-border-radius: 5px;
iifksp
I really like this, but it’s a pity that win chrome can not correctly display this.
Rembrand
A very nice sollution. I was looking for something like this last week but I opted for masking the corners with png’s instead. Will try this one out next time though!
Mike
very useful article. I haven’t thought about making a corner for the image will need to go a way like you said. I thought it will be the same with the border.
atxatx
Too bad it’s not cross browser… Not working in any ie…
Web Designer Evan Skuthorpe
awesome trick! nice work.
Claire
This is very nice, but what about IE6?
Marlou
The CSS version works for me in the latest (stable) release of Firefox, aswell as the IE9 Testdrive tool. The jQuery example doesnt work at all in the IE9 Preview tool, and does not have rounded corners in Firefox. I’m viewing on Windows 7 64.
Multyshades
its really useful article, thanks share this nice & informative stuff
Tutorial Lounge
really helping techniques you sharing in this article. thanks
Ayesha Lomaski
Hi! I’m having a problem when the span tag wraps the img the img goes small (like 1 text line height) why is that happening?
Ayesha Lomaski
discovered: add a “display:block;” at the span style and it works ;D
Hoque Md.Nazmul
Instead of sharp corner, rounded corner appeals more. I have ported the code to work in prototypejs
document.observe(“dom:loaded”, function() {
$$(“.rounded-img”).each(function(tgt) {
if (Prototype.Browser.IE) {
tgt.src = “roundhandler.ashx?f=” + tgt.src + “&c=888”;
} else {
tgt.setOpacity(0).wrap(new Element(‘span’).addClassName(tgt.getAttribute(‘class’)).setStyle({
‘width’: tgt.width + ‘px’,
‘height’: tgt.height + ‘px’,
‘background’: ‘url(‘ + tgt.getAttribute(‘src’) + ‘) no-repeat center center’
}));
}
});
});
For IE, I am using a http handler to make the image rounded. If you would like to see it in action, you can go to this location
http://nazmulweb.com/site5/demo/rc/
Thank you so much for sharing such a creative idea.
Alex Kloss
Nice idea, but opacity:0 uses more CPU e.g. most mobile devices than visibility:hidden. Do your mobile users a favour and swap these attributes.
George
Very cool & useful idea, but sometimes I have to refresh to get the .js to run (both in my implementation and on your demo page). Anyone know how to fix that?
Thanks!
George
Ricardo
Why don’t you have a “share on twitter” ?? this article is pretty cool !
Andy Hunt
@Claire (#29)– What about IE6? What year do you think this is?
Ian
I’m currently working on a website and was having this problem! Thanks for posting, this saves me a lot of time!
Shikeb Ali
I think CSS3 need some more time to grow as we clearly know whats the problem is… we are still struggling and crumbling our code because of these browsers.
Anyways… Nice work and keep it coming :)
Comprar online
Nice Tip!!! Thanks for share!! =0)
dsy
That’s really useful ! nice and easy !
AboutWout
Excuse me if this has been covered in one of the comments already, but inset box-shadows do work in webkit browsers.
/* Safari & Chrome */
-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .5);
/* Firefox */
-moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .5);
/* Opera and W3C */
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .5);
Like I said… I haven’t read all the comments, but I thought it was worth noting. (all tested on Windows XP).
Greetz,
Wouter
Kromack
Very nice script !
Jenna
I was bored so I created a jQuery plugin for this lol… it’s very basic but it executes in about 0.005ms as opposed to your 0.020ms. Every little helps as they say ;)
You just need to include the plugin file and then execute $(yourSelector).roundImg(radius) on DOM ready.
E.g: http://jsfiddle.net/JJenZz/3gYqj/
I included the unminified code at that URL too so that you can see how it’s built but you don’t need to save that in your plugin file :)
Marcy Clark
This is cool, thanks.
I hope it works with IE9
aki
Great tuts. Nowadays everything can be settle with a CSS and jQuery
farhad
Nice tutorial man.. thanks..
Andrew Roberts
I actually did this a while back on a project for school http://www.cs.iupui.edu/~ar43/a455/zenGardenFinal/ – But the inset effect is very cool!
Andrew Roberts
Oh, I just realized you used jQuery for this? My rounded images are all done with CSS on this page http://www.cs.iupui.edu/~ar43/a455/zenGardenFinal/
Web Dizajn Sarajevo
Wow! Exilent!
Keith | Earn Passive Income At Home
This is a quality article! I’ve been reading quite a few articles recently on CSS3 rounded corner implementations, and this is one of the best I’ve read. I’ll certainly be using this implementation in my work from now on.
Thanks for the great article.
Cheers,
Keith
yohan
jQuery is cool :)
Lindha
Thank you, I have come across this several times lately. My fix have been similar but never with the use of jquery. Its a great idea.
Singlebits
Great solution, thanks as always.
fajar
it’s cool
PCI Compliant Hosting
yeah it would be such a waste not to show the rounded edges! great!
code pixelz media
wonderful article very helpful indeed.
ridwan
i already try that, and the result are nice
K
and for IE ?
Mikael
Great tips! I will be using that example on my next project!
hagi
hey dude
just a proposal… it might be better to hide the IMG tag by visibility:hidden; than opacity… so original space keeps reserved and visibility is much more browser compliant than opacity – even in very old ones.
good article thanks nick
cheers
Sivaranjan
Lovely post, i had been struggling to find something like this for quite a while. Thanks a lot for sharing. I am going to add it to my CSS aggregator site.
khay
nice trick.. cool..
wildanr
It’s work, but i’m a little bit disapointed because the need of css 3 :( Maybe can have more good use latter
Alex Hall
It’s still just a shame about the webkit bug that doesn’t seem to allow the radius to contain an inset shadow. I created a nice form in CSS3 made to mimick an image I saw. It works great, except for that one inset box-shadow, much like your example here.
http://www.devseo.co.uk/examples/beautiful-css3-form/
fajar
good job..
ilham
i will try it, thanks :D
shiva
Good Tutorial, very useful
Mantanera
Very nice effect! I like rounded corners, I think we’ll implement it very soon :)
mediadinger
Thnx a lot … very helpfull !
doris
nice trick.. cool..
Box Model Junkie
Nice tutorial, CSS3 tips are always very useful.
Andre
Great trick; looking better even in Safari.
Why do you use the .load method / ajax function for this? You could use .wrap right after the img selector, like this:
$(“.rounded-img, .rounded-img2”).wrap(function(){
etc etc
Or is there any reason for using specifically the .load in this way?
Kojeje
Thanks so much for the code you gave us :)
khay
nice post. thanks for info
wij
Woow, that’s great design !!
thanks for sharing.. it’s helpful
Check Website
Definitely nice tutorial going to have to bookmark this.
Terry Reilly
Thanks, for a great post. I have learned so much from this (and your site) about CSS.
Thanks Again
dety
i love design. thanks for sharing
Momo
woow, it’s a great design…
very nice..
Arief
Thanks…
Jquery is the best. I like it
code pixelz media
wonderful article very helpfull inded
Web design portfolio
awesome tip! still learning CSS3 so these tutorials help!
rifky
thanx…i’ll try..
rifky
thanx..i’ll try…
tedted
thanks for your tips
Web Design LA
Great idea. I implemented it and it really works and shows great look. Thanks
Steve
Thanks for the tips !
Business Catalyst Dev
Thanks again! great design tips!
Roy
thanks for the tips, i tink IE is difficult browser
sam
your code don’t work on internet explorer 8
Melfina
Thank you for the trick. It looks really good, I’m looking forward to trying this.
Ian Milne
Thanks for the tutorial. It works great, even for me. Great site.
ChrisC
Thats really good that, although if it converts an image thats within a display:none div then the size comes back as 0x0, therefore not displaying properly.
Outside of that it works really well.
likecss
Thank you for the trick. It looks really good, I’m looking forward to trying this.
jimmy
dude this is what i have been looking for . thanks man great work.
aviva
woow, it’s a great design……i’ll try…
Slobodan
Nice, too bad it doesn’t work in ie.
Matt
IE is not worth the hassle! If people want a better experience on the web, then they will have to download better web browsers.
Benjamin Charity
An interesting hack for creating the inset shadow that I’m using for the first time…
If the image is inside a containing element, use the :after pseudo class and create an empty element with an inset shadow without adding to your html markup:
CSS:
box-shadow: inset 0 0 10px rgb(0,0,0);
-webkit-box-shadow: inset 0 0 10px rgb(0,0,0); /* Safari, Chrome */
-moz-box-shadow: inset 0 0 10px rgb(0,0,0); /* Firefox */
-o-box-shadow: inset 0 0 10px rgb(0,0,0); /* Opera */
content: “”;
display: block;
height: 80px;
position: absolute;
left: 3px;
top: 0;
width: 80px;
z-index: 1;
Make this element the same size as your image and position it directly on top. Granted it is still a hack, but a touch of CSS added is better than a script!
Great post as always!
Solo
Yeah,so cute!
Gatz
don’t work with iexplorer so I find it useless
Luke S
Great tutorial and website! Keep up the good work.
Freelance Portal
http://www.freelanceportal.8rf.org
Work From home: Homebased website design jobs, web developers,graphic animation, SEO, CMS templates, blogger themes, article writers, Joomla, wordpress, API programmers, ASP, XML, PHP programming projects. XXX video blogging, ebay sellers and online IT support.
Cheatsheets and online tutorial.
http://www.freelanceportal.vze.com
wptidbits
Another excellent tutorial. I know this is possible to do but you started it Nick. Really awesome. Unfortunately, still the same thing happen, when will IE starts to support this great function? We don’t know that. Cross browser test not really performs well in IE. Thanks for the trick anyway. Nice to implement in my next blog.
sher
you thanks cici
rose
very nice
Steam Multimedia - Web Design
Nice tutorial.
The biggest problem is that each browser runs on different rules. i noticed that you didnt bother talking about IE 6,7 or 8.
I think everyone knows how bad they are for web standards.
logo design
great nice work
Ahmad Alfy
I didn’t give my images a class and selected it with regular CSS selector :
.element img { }
It didn’t work … I tried over and over till I figured I have to give the image a class to make it work.
Thanks a lot for this handy plugin
neo
Nick, Darcy – thanks!
You guys make things look so easy and so pretty!
Truly appreciate the share.
jaw crusher
very nice
Mo7mD.ZaYOnA
very nice
parind shah
Nice, but sorry with IE its not working.
Adriana
do’ no’ why but this website is absolutely pleasing to the eye :)
Deko Web
really nice thank you..
neo
hmmm, I’m a little confused by the .load method
I’m trying to style images off a feed and I’ve found that if the css executes before the js has time to build the elements (ie on initial load) it doesn’t work. If I refresh…voila. If I navigate to another page and return using the back button, it breaks.
I changed .load to .wrap thanks to @Andre and it works. But why?
skqi
cool stuff. Thanks
CSSHunt
Nice work i really like it lovely!
CSSHunt
really nice work!
lisa
yes, well, if you want to buy crusher, pls visit the webpage:www.hammer-crushers.com, feel free to contact us:[email protected]
Jeremiah
great post!! I really love the look of rounded images. It just seems a lot cleaner.
Rick LaPoint
I’m pretty new to WordPress, and for the last few weeks have been trying to “reverse-engineer” on my own, many of the things I have seen in my travels, and also now see here on your site. I’m not quite sure how I ended up here (too much link hopping…) but your shadow corners method is something I’ve been looking for. Thanks!
Rick
cheap balmain jacket
very nice!
YoonMi
Great post – def going to use this one!!!
lisa
th company is really very good, http://www.hammer-crushers.com, the product of it is very [email protected], MSN;[email protected]
ospop
woow, it’s a great design
ospop shoes shop
Great info. The provided demo is very useful.
Tiago Felipe Ronchi
Gente, do que adianta se não funciona nos IE’s.
Vamos ser mais pé no chão.
Thiago
it is worrying that po may be very heavy if you have many images, the idea is to use css border with rounded corners and for sure in the near future will be able to mask css ……. vlws
Billy Girlardo
IE9 looks good too – go figure lol.
shoea
I have recently started using the blogengine.net and I having some problems here? in your blog you stated that we need to enable write permissions on the App_Data folder…unfortunately I don’t understand how to enable it.
Rob Hiffy
i find jquery so hard. thanks for this! invaluable
Melvins
Thanks to Darcy Clarke for generate jQuery code. From all types of shapes I like rounded shape the most because It looks like amazing and preety good design.
Los Angeles Web Design
Waqar
Even in firefox, I can see that it displays correctly..
Artur Ejsmont
great post and design :)
thanks
Martin Bay
Very useful little tutorial.
Grovulent
I just wanted to echo the comments of Neo and Andre – if you are noticing that your images aren’t displaying when the browser has cached them, the solution is as they describe – change the load function to wrap.
Julie
Doesn’t work in my IE8…stupid IE. Works in firefox though!
mytravelpot
I like rounded shape the most because It looks like amazing and preety good design.
Mr.willsons
When you do article marketing, your intention is to increase the number of visitors to your website. It is not our abilities that show what we truly are, it is our choices. I have look for such a article for a long time,
Zsolti
I experienced a little bug with this method, on the sample. I am using Firefox 3.6.12, I looked at the sample at this link:
https://webdesignerwall.mystagingwebsite.com/demo/jquery-css3-rounded-img/
Then clicked back, back again to this article, at the end I clicked the sample link again for a closer look and then the image was not rounded, it overflown the border. After refreshing with CTRL+F5 it was working again. Just thought you might be interested. :)
Good stuff though, very good.
mikeson
When you do article marketing, your intention is to increase the number of visitors to your website.ugg classic boots
nazir
Its not working in IE
daconde
It relies heavily on touch because the pages I have a user acting on, are usually a collection of child records. uggs outlet Caching is a big help in this respect.Thanks
jozsmith
These are awesome, and as noted before, each seem to have a distinct personality/character about them.
Thanks @darkmotion!
Henry Peise
As you can see the iPhone 3G has a problem getting a sharp focus on objects that are close to the lens. The photo is blurry and very grainy compare with white iphone 4
Designing Mall
This post is a solution of a very practical problem. way of expression is also impressive
Juno Mindoes
If you want to follow the fashion trend, you can never miss the hottest White iphone 4 Conversion Kit. With smooth and liquidity design, we sure White iphone 4 Conversion Kit is what you want.
mikwillson
That is to be expected in a long-term, high-risk project like ours. So, we turned to the blogging community for help – and got it! We have published our problems, and the community responded with results!cheap ugg boots
silviu
but how-come? i think you could’f done it just with CSS
??? have you tried: “overflow: hidden” (for the borders)
ilkomerz
nice solution,, thanks for share..
Uçak Bileti
Thanks for good article kimsesiz
Ben
Thanks for sharing. Lol
css splash
nice to see this
css splash
nice to see this- csssplash.com
Ralph
Thank you for your solution.
Christina Smith
Where in my wordpress files should I place something like this? The style.css? Index.php?
Mike Caputo
This is great, what an awesome effect!
Nicholas
This is really great–thanks for sharing! Though, I must say it’s really frustrating that we have to find tricks just so a cool effect is useable in multiple browsers in (almost) the same way. :[
bggfbf
gfbgfbgfb
gfb
gf
bgfb
bob marteal
Great trick, Nick. Good use of jQuery as an enhancement. Might clarify things a little to mention the additional css on the class that is not included inline.
sumomax
is not easy to put on weight
Daas
Good idea
i will catch soon
uçak bileti
thanks, i will share..
Rachel
Great tutorial this is something I’m definitely going to try this out as I am redesigning my blog theme. I looked into this previously but I was worried that round icons would cut peoples heads in half however all of the Gravitar icons on here look great!
Gena
Very cool effect :) I have been looking at implementing it on a site I am working on, especially to “neaten” images placed in certain articles, and on screen is looking good :) I found a snag though that I wanted to ask help or advice for… While testing my print stylesheets, I saw the images weren’t being displayed so you can print them (with the browser not printing backgrounds and the image set 0 opacity)…
Is there a way to correct this, possibly some javascript or JQuery that would run when the print option was chosen, to ‘undo’ the effect for the print version, so the images can print correctly?
Joerg
Just an echo of other comments: if the rounded effect only shows after reload change .load to .wrap in the script.
ainzon
Hi there,
great work. Just want to know if there is a solution for the print. My print preview doesn´t show the images.
Thanks.
dexx
age of heart attack decreased with each passing day, he said.
Shawn
How would this be implemented into wordpress?
Chap
One question, how much browser are actually support this cool feature?
Salaam
Hi, I’m new to css and here’s something that I can up with..
.round
{
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
width: 96px;
height: 96px;
overflow:hidden;
border:#000 1px solid;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
works in firefox, don’t know about other browsers. Hope I have done it right, if not please let me know.
thanks.
Charmaine M.
:) it works on chrome! thank you!
orhanbt
This is verry good
リサイクルトナー
CSS3 rounded corners can we increase the width of the design value. I want to get used, and this thought in reading posts!
Jitendra
why this is not working in IE browser !!! Can any one help me out…
complex41
And then he handed you the thirty-five 45
mei1i
hi.
some time i was looki’n for this every where but now i find it here, too late but tnx!
Durga
Hi, I love the look of these rounded corners. Thanks for sharing! I seem to be having an issue, however… gaps appear between the image and borders on the right and left of all images (in all browsers). I’m assuming my css is interfering. But I can’t figure out what’s causing the problem. I’d really appreciate if anyone has any suggestions! Cheers.
Durga
I found the issue… problem resolved! Some CSS code was adding padding to that a particular div. Thx again :)
Alfonso
Don’t run OK in IE 8. Sorry
Mamouneyya
That is because IE8 doesn’t support border-radius at all. It has nothing to do with the JS code.
Do yourself a favor trashing this crap and find a REAL browser. That is the only real solution, if you’re searching for a one!
texxs
IT’s not about us, it needs to work right in IE 8 Because so many of our clients website visitors are using it still. Around 40%. So ya, much as I don’t want to, I have to make sure the design works in IE6, 7, 8 and 9.
YerMaw
Not the best of advice, @Mamouneyya and switching browser is not the only solution. You could try CSS3PIE for support in IE8, I think it even goes down to IE6. So the IE users visiting your site will get to see your rounded corners.
rachaelov
Yes, @Mamouneyya, I wish people would stop saying “oh, just abandon ie, its crap” – in the real world, I just can’t tell my clients that, and expect to be paid.
Sonet SEO
@Rachaelov just put fixing IE as an extra on your estimates. This way you get to see how many clients are really interested in supporting it. You won’t waste time on each project and if the client goes for it you get paid.
Dave Burrows
There’s nothing wrong with holding onto the past, not until one tries to make others do the same. If you like IE, that’s great, but it’s not, and never has been, part of the wave of the future. The choice is up to the user to stick with a sewing machine that isn’t capable of making a zig-zag stitch, or acquiring one that is. It’s just not reasonable to expect for developers to find fixes for a straight stitch machine, and more and more developers are refusing to. Microsoft certainly has the resources to keep up with technology. That they refuse to is their black eye. I have no intention of allowing that to blacken mine.
gilgalo
esoy probando el alojamiento de
Mamouneyya
Thank you very much! While I cannot say it is THE perfect solution, since it won’t work with JS-disabled browsers, it’s still perfect when you cannot modify the HTML layout.
Geert-Jan Brits
Without having tried this: would the above JS + Pie css (http://css3pie.com/) make this work on IE as well?
Brilliant effect!
Erica Redfield
I tried to implement this on my wordpress blog’s theme (http://www.iamperfectlyaverage.com/blog) and added the .js file to my /js folder in the theme folder and then added the jQuery code to my header.php file and changed the div class name to match the one I was trying to change: .avatar—the comment avatars, but it did not work. Any idea what I’m doing wrong? Is there some extra step I need to take in order for it to get to work on a WordPress theme? Any help would be greatly appreciated.
jimmy
Hi,
I stumbled across this site and have to thank you alot for bringing this idea to my mind, I have used the “background trick” in the past, but this jquery really makes it easier to add extras in the future and will become a staple part of my designs now.
Many thanks
Jimmy
Peter W
Tricky! Thanks!
Angela
Hi! :)
(sorry for my bad english)
How can I put some text on the right of the images?
I tried with align=left on the image, but the text is always on the back.
Wordpress Fanboy
It’s amazing looking back at this post and realizing how far advanced this post was in regards to CSS3 and browser support. Now most browsers support rounded corners on elements using the border-radius css attribute.
Miguel
Instead of all that
its faster and easier to do it in simple css3 without having to change pictures to background or adding javascripts, the trick is to use overflow: hidden; and works on most browsers have not test it on opera but every other browser works; example
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 5px 0px #ccc,0px 1px 0px rgba(204,204,204,.3) inset;
-webkit-box-shadow: 2px 2px 5px 0px #ccc, 0px 1px 0px rgba(204,204,204,.3) inset;
box-shadow: 2px 2px 5px 0px #ccc,0px 1px 0px rgba(204,204,204,.3) inset;
margin:0px 5px 0px 0px;
overflow: hidden;
doug
I just confirmed, Miguel, your method works on FF11, chrome, ie8 and (via ie tester) ie6,7. So does the jquery, but the css is probly better and wont have a flash of corners while the js loads.
doug
oh, forgot to mention that ie only works with cssPie http://css3pie.com/documentation/getting-started/
Anthony
Just wanted to mention that this worked beautifully and is the much simpler solution. Thanks!
Aniket - Freelance Web Designer
Useful trick. Very useful indeed.
I use drupal & this can be achieved by using a module called Imagecache actions.
but this tutorial is helpful in lot of ways. :)
Thanks.
hasta karyolası
thanks, i will share..
Tekerlekli Sandalye
Thnks for share……………………………
Belajar blog
your wellcome
Jason Bailey
Thanks for this article!
I started with your example, but I didn’t need the shadows. Plus, I also wanted to see if I could do this without creating a background image.
I ended up with a similar technique, but instead of wrapping a span around the image, I am putting the span before the image. The span contains a rounded edge box with a thick border that matches the page background color. Like your example, the span grabs the original images width and height.
At the end of the function (where the opacity setting was) it adds a border class to the image to match the span above (I found it didn’t look right if I didn’t do this). It seems to work in Firefox, Safari, Chrome, and IE9. I’m more of a visual designer and HTML/CSS guy, but hey, it worked for me.
Here’s my tweaked code:
$(document).ready(function(){
$(“.rounded-img”).load(function() {
$(this).before(function(){
return ”;
});
$(this).css({ border:”3px solid #FFF” });
});
});
Jason Bailey
Crap. The pasted code didn’t past correctly. Sorry about that.
ısı pay ölçer
thank you for share.. Good Joob!
testtoabc
I am trying to do something on round border with css property which link http://www.webinbangla.com/2012/05/css-round-shape/
HackBert
Great tutorial there, But I want to know how to create something smiler to the images that appears on the commented post, Having people image in the circle box on the comment section.
Thanks
dix1975
thanks for sharing code. i’ve applied it to gallery on my site.. nice one!!
Afzal
Thanks for such a comprehensive post and for sharing such valuable insights .
Afzal
I am glad to become a part of this post.Really nice work you did man.