Comments on: CSS Liquid Round Corners

By: francky

francky — Thu, 14 Jan 2010 14:37:37 +0000

Also @Alexandra:
The link to the mentioned article http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm is still working.
But the homepage and some other pages on my other site http://www.developerscorner.nl weren’t working. Link allright, but site hacked: just yesterday!
My provider knows about, and is taking action.

By: Paul OB

Paul OB — Wed, 13 Jan 2010 19:24:56 +0000

Alexandra there are quite a few tutorials about on transparent rounded corners and you will just have to find one that suits your specific requirements as they all differ slightly.

Here are a few links to keep you busy.

http://www.smileycat.com/miaow/archives/000044.php

http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/

http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

By: alexandra farmer

alexandra farmer — Wed, 13 Jan 2010 17:28:07 +0000

The lastest link did not work either as the box sides where css borders instead of images.

By: alexandra farmer

alexandra farmer — Wed, 13 Jan 2010 16:45:13 +0000

Hi, This is a great tutorial. But transparency and the use of PNG are quite current these days and allow for more advanced design. The use of transparency will not work with this technique. I lost a bit of time since I did not noticed it at first. See I wanted to make a floating window with transparent round corners. Unfortunately, we can see the tilling of the sliding image behind the transparent round corners.

Any new tutorial in the work for this? See 194 does not provide tutorials for borders with effects all around (stoke and gradient).

I will try 193 suggestion which closely resemble the effect we have here but with transparency:
http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm

By: Shannon

Shannon — Sun, 03 Jan 2010 03:39:35 +0000

Let me be the first to thank you in 2010!

This technique is great for a new site I am building. I know I will use it often.

By: spawn3000

spawn3000 — Sat, 14 Nov 2009 13:31:15 +0000

it’s best if used css+sprites.

By: Paul OB

Paul OB — Wed, 21 Oct 2009 10:16:50 +0000

Hi Erik,

You should be able to add a table quite easily

e.g.
http://www.pmob.co.uk/temp/liquid-round2.htm

It’s best to avoid content going into the bottom shadow though if you have links as they can’t be clicked due to the way the bottom part overlaps.

By: Erik

Erik — Tue, 20 Oct 2009 18:53:20 +0000

Hi, nice tutorial. I have the box showing up fine, however, when I use it within a table it gets messed. I was able to change the width of top and botttom – that fixed it in chrome and ff but IE is still not displaying correctly.

By: Paul OB

Paul OB — Mon, 19 Oct 2009 19:04:38 +0000

Hi Francky,

Thanks for your comments

I did actually cover transparent corners a couple of years ago in another article here:

http://www.search-this.com/2008/01/24/simple-round-corners-in-css-revisited/

Or another method for shadows over gradient backgrounds using one image.

http://www.pmob.co.uk/temp/roundshadow-oneimage-opera.htm

By: francky

francky — Sun, 18 Oct 2009 18:52:39 +0000

Hi!
Nice article! It’s corners are suitable for pages with a unicolor background behind the corners.
In case you need corners which can scroll over an image background or a gradient background, a different method has to be followed, as the outside of the corners must be transparent.

But transparency support is also possible in css only, and: with only 2 images (or even 1 img, if the left and right border of the box is consisting of a unicolor borderline of some width).

See for a universal method: the 2005 article Liquid Round Corners (http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm).

Also aboard: Liquid Corners Playgarden (http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-index.htm).

Have fun with css!
Greetings,
francky

By: Mmonk

Mmonk — Thu, 15 Oct 2009 13:18:26 +0000

Thanks a lot, that worked like a charm!
Eventually I decided to go with a fixed width and a repeating vertical image cause like you said, the results are cleaner, see http://www.mastermonk.com
For smaller boxes the resizing solution i like though, so I’ll hold on to that code.
Thanks again, cheers

By: Paul OB

Paul OB — Sat, 10 Oct 2009 13:11:16 +0000

@MMonk: I can see your image now:

http://www.mastermonk.com/test/roundmenu3.png

The problem with this is that you can’t slice or join it anywhere because it will never match up.

You either need to create something more symmetrical or use individual images for each element that you want to wrap.

You could try and stretch the image using a foreground image for the coloured lines but the results won’t be that clean.

Here is an example(sorry but my server seems to be down at the moment so you may have to come back to these links later in the day.):

http://www.pmob.co.uk/temp/monktest.htm

Unfortunately the above fluid version doesn’t work in IE7 so you would need to supply width and heights for IE7 like so:

http://www.pmob.co.uk/temp/monktest2.htm

IE6 would need the pngfix routines added but I doubt that they would work with scaled images like that anyway.

Hope it’s of some use anyway.

By: Mmonk

Mmonk — Fri, 09 Oct 2009 21:58:58 +0000

Thanks for the help.
I tried both the links u sent.
Made a temporary graphic for the frame and it wraps around the other image nicely without having to specify its dimensions.
However it shows the box multiple times on top of eachother, as u can see here. This is what i meant by irregular sides, the graphic has kinda jagged edges. hxxp://www.mastermonk.com/test/test.htm
I think it probably wouldn’t have been so hard if my content image had a fixed width or height. Anyway, maybe I’ll just try using a frame even though that’s ‘not done’

By: Paul OB

Paul OB — Fri, 09 Oct 2009 18:42:22 +0000

Hi Mmonk,

The techniques are basically the same whatever you do and you just have to hang the pictures on the right hooks.

You can only have square shaped elements in CSS so I’m not sure what you meant about irregular shapes.

There is nothing special about applying round corners to elements and in the basic form you just wrap enough elements around the object and stick your images in place.

If you want to be clever then you start cutting down the number of images and painting 2 sides at once as in this article.

Alternatively you can get away with a single image as in these demos.

http://www.pmob.co.uk/temp/roundcorner-oneimage.htm

http://www.pmob.co.uk/temp/roundshadow-oneimage-opera.htm

By: Mmonk

Mmonk — Fri, 09 Oct 2009 18:07:53 +0000

Hi.
I really appreciate this thorough post on rounded corners. I have a question though..

Basically what i want is to have a custom frame around an image (not text). this frame would consist of 6 (preferably images. this frame would go around a cartoon i have on a wordpress site(dynamic, see link). problem is, not all cartoons have the same dimensions, so there is neither a fixed width nor height i can specify in css.
i just want the frame to enclose the img right around its edges whatever its dimensions may be. not a bigger frame, not smaller, and to make it more difficult, i would like all sides to -stretch- instead of partially show. this is because the sides have irregular shapes that if partially shown might not match the adjoining corners.

I hope I’m not too demanding in asking this, but I’ve been looking all day for a way to do this. My knowledge of css is basic. I’ve tried applying your code and insert an image instead of text for content, but it doesn’t come out as i described.

Come to think of it it’s probably cause i don’t want the frame to be liquid, but to resize dependent on the enclosed img.
Any help would be much appreciated, thanks.