Dynamic Drive CSS Library- Curly Corner Container

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: DIVs and containers: Here

Curly Corner Container

Author: Dynamic Drive

There are countless techniques on the web for adding curly/ round corners to DIV containers. The below shows one way to add a curly lower right corner to any DIV on your page. It does so by using relative positioning to slightly offset a DIV to the right and bottom, so its background image, which is a curly image, falls inline with the border of the outer DIV.

Demo:

Some title
Some text here.Some text here. Some text here.
Some text here.Some text here. Some text here.
Some text here.Some text here. Some text here.
Some text here.Some text here.

The image:

The CSS:

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (24)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 2 of 3 pages < 1 2 3 >

I have been looking for something like this. I going to use it in my next project. :) thanks to guy who write this!!

Posted by Pixelfinger on 10/10, 11:01 AM

Is it possible to use this technique, to get all four corners of a div rounded?

Posted by joe on 12/14, 08:20 PM

It would be really nice if this example would be combined with the "CSS Gradient Shadow" - the effect would be fantastic. At the moment this is not working since the "shadow" doesn't play nice in the corner :(.

Posted by Moho on 03/23, 02:39 PM

can your help me
how to make a round coner without image~~

Posted by Endis on 05/01, 01:08 AM

Thanks for the code. I'm trying to make my website as ?cssable? as possible without over using. Hoping to use an adaptation of this script shortly. I love these free resources, thanks DD..

Posted by Ben on 06/20, 07:02 AM

'Endis' - if i remember rightly, there is a resource for achieving rounded corners without using images at cssplay.co.uk

Posted by Ben on 06/20, 07:06 AM

I look forward to using something similar to this on our adaptiv website - using your method, thanks.

Posted by Adaptiv Media on 09/25, 09:39 AM

Thanks for the code, have used it on this website:
http://www.jp2designs.com/design/category/Bulletin/

Posted by Jermayn Parker on 10/15, 09:32 PM

<font face="Arial Narrow">I don't seem to understand...I've tried it but it doesn't work..I think I've done something wrong with it :/</font>

Posted by Euphemia on 04/10, 01:44 AM

Very usefull, Thanks

Posted by Pilot on 05/11, 12:54 AM

Comment Pages 2 of 3 pages < 1 2 3 >

Commenting is not available in this weblog entry.