Nice technique Dan. I’m going to try it myself!

Good to see you posting again. ;)

If that’s the kind of excessive markup needed to create rounded corners, I say “hooray for right angles.” What a nightmare. If you must use rounded corners, use jQuery to add that after the page is loaded.

@Benjamin -

I agree, it’s a lot of markup.  Remember, though, it’s not just creating plain old rounded corners; these corners do a specific job that other solutions don’t, so you sacrifice code brevity for the advantages stated above.  Also, many times in the professional world, it’s unfortunately not a possibility to just drop the rounded corners from a design.

Using jQuery is of course always an option, but if you end up having a bunch of these containers on one page, you can run the risk of having users notice a delay.  I’ll have to look into that some more.

Either way, thanks for stopping by.

[...] T Ott has a pretty slick example up on how to add auto-cropping rounded corners. This means you can use any regular rectangular photo and apply a rounded corner look with just [...]

[...] Auto-Cropping Rounded Corners (tags: css) [...]

[...] donde se explica como hacer un generador de imágenes redondeadas con CSS. Eso sí, luego vas a tener que hacer que funcionen las transparencias de PNG en IE6. [...]

I think those extra elements for creating a rounded corners effect is overkill, although I do like the benefit of your cropping technique. I’m confused about your comment on training people using CMSs though: No client I know would tolerate having to write all that HTML for a simple graphical effect! You must have some very easy going clients. ;-)

I think the extra HTML elements might be tolerable if they are just used once or twice on a page, but if you are using this technique for a lot of images, I’d have to agree with Benjamin that manipulating the DOM would be better. Although, you would probably have to do some some speed testing to see if a larger HTML file to download is quicker than manipulating the DOM after the the page has loaded—and whether or not the visual change is too noticeable.

I guess at the end of the day it all depends on how important the rounded corners are to the design. If they are just ‘nice to haves’, I think the DOM method would be best.

@Matthew - I wasn’t referring to making clients write html.  Instead, when setting up a CMS like Wordpress, for example, you could code this solution into the sidebar, and then your clients could stick whatever content they wanted in there and still have the corners of their content rounded automatically.

I did something very, very similar for Technorati (which is a couple of designs past that one) a few years back, but with three differences.  One’s minor, the second notable, and the third structural.

The minor one: I used bs instead of divs.

The notable one: I used one background image, not four.

The structural one: no “b_innerContainer” or other interior-wrapping div; just the element to be cornered and the bs to define the corners.

In exchange, the CSS was a little more complicated than yours, though not by much.

So, given those clues, can you work out how I did it?  I promise to share the answer if nobody does (ping me by mail if needed).

@Eric - Thanks for stopping by.  As far as using one image, my original version of this did, but i couldn’t get the ie6 transparent png filter to work with background-position, so i abandoned that (sadly) and moved to four images.  If you know of a way to get that to work, i’d love to know.

As far as removing the inner container…you could probably set all of the positioning values to -1px and it would overlap the outer container borders.  That indeed would make things more simple.

Perhaps I’ll do some more testing and update this solution to reflect those changes. It would be nice to cut it down a little. Plus, who doesn’t love a CSS puzzle? (;

Thank you for your idea and i will testing in my next days for my own websides.

Ralph

Correct about the -1px solution!  And yeah, the difference with the background image(s) is that I was using GIF89a instead of PNG, so I didn’t have to deploy any fixes for IE6.  The various IE6 PNGfixes, like Angus’, kill ‘background-position’ values, which in turn kill the ability to use a single image.

I never did get around to writing up how I did my solution.  Maybe we should do it jointly.  I think a useful update would be to use CSS hacks (or a conditionally commented IE6-only stylesheet) to feed the sliced-up and fixed PNGs to IE6, while letting everyone else use a single PNG.

Of course, if IE8 supports rounded corners, the impetus for using this kind of solution will diminish, but it could still be very useful for the next couple of years.

So whaddya think?  Should we write it up, maybe submit it to A List Apart?

@Eric -
Re the write-up, I’d for sure be all for doing a joint article; for ALA or otherwise…I think that’d be great fun.

Re what to do about ie6, it’s always a toss up, isn’t it? One nice thing about going the direction you suggested is that we could use that chance to apply the css filter (for PNG-type transparency) manually, and throw out the script. I’ve already noticed delays running that script through each corner in ie6, so maybe that’d be the way to go.  It also would make me feel a lot better to have just one image loading normally.

Anyway, maybe drop me an email (dan at this site) and we can talk about things some more.

@Eric: I attended a workshop of yours in London a couple of years back, i still use the method you describe for rounded corners, which is the one you have mentioned (i assume it is still the same one and hasn’t been modified). Having 1 image for all corners is great, and the slight added markup is fine 99% of the time.

I have to admit i didn’t even think of adding the corner markup using JS (been a little slow there, oops!). Using jQuerys $(document).ready() method would be perfect as users won’t see the corners flash into place. May just have to add a quick plug-in to do it as i seem to be using the method a few times a month.

Great article!

[...] 3 Simple Steps in Coding a Rounded Corners Layout- A new solution for rounded corners, what it does is: it crops the content below it, so that anything with a background color or image (headers, paragraphs, even images) automatically get the rounded corner treatment with no extra work. [...]

[...] Auto-Cropping Rounded Corners- A newborn resolution for amygdaliform corners, what it does is: it crops the noesis beneath it, so that anything with a scenery colouration or ikon (headers, paragraphs, modify images) automatically intend the amygdaliform crossway communication with no player work. [...]

[...] Auto-Cropping Rounded Corners- A newborn resolution for amygdaliform corners, what it does is: it crops the noesis beneath it, so that anything with a scenery colouration or ikon (headers, paragraphs, modify images) automatically intend the amygdaliform crossway communication with no player work. [...]

<blockquote cite=”“>
If you must use rounded corners, use jQuery to add that after the page is loaded.
</blockquote>

the curvycorners-plugin does not work with “position:fixed”, you need to do it on your own…

zara

[...] Mon 01-12-2008   Easy Rounded Corners with Border-Radius Saved by govardhanks on Tue 18-11-2008   Auto-Cropping Rounded? Corners » {Daniel T Ott} Saved by virreerriv on Tue 11-11-2008   How to Make Rounded Rectangle Round, Illustrator [Free [...]

[...] DemoView it Here Auto-Cropping Rounded Corners- ???????????????, [...]

[...] Auto-Cropping Rounded Corners- A new solution for rounded corners, what it does is: it crops the content below it, so that anything with a background color or image (headers, paragraphs, even images) automatically get the rounded corner treatment with no extra work. [...]

[...] DemoView it Here Auto-Cropping Rounded Corners- ???????????????, [...]