Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

The HTML:

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 1 of 3 pages  1 2 3 >

Is the inner div really neccesary?

Why not just use it as a background image in the main div and pad away the text from it.
Posted by EJ Fox on 05/08, 07:42 PM
The use of url(relative/path/here) won't work in Mac IE5...
Posted by moneybagsxp on 05/10, 10:45 AM
The inner diveis neccesary because you can't place a background image on top of a border within a single element.
Posted by Mateo on 05/10, 10:48 AM
Can I have multiples of this snippet? I'd like two rows of two curly images.
Posted by WJ on 05/16, 01:10 PM
It works in firefox, but when I use IE6, sometimes (not always) the content would be shown out of the DIV container, if I resize or open it in a new windows it still show correct, test the bug see here please: http://www.uwbcomm.com/resources/shopping.asp
Posted by nicene on 05/18, 12:26 PM
If you build lengthy bottom and right borders into the img file, you can do away with the nested divs and simply use:

[code].curlycontainer{
border
-top1px solid #ccc;
border-left1px solid #ccc;
backgroundurl(brcorner.gifno-repeat 100100%;


Of course, if you have the dimensions at around 700px square, the img filesize becomes relatively much larger, but it's still only a shift from around 890 bytes to around 2.5Kb; still a small.
You claw some of those extra bytes back if you take into account that you won't be adding extra divs to the markup for each instance or a CSS rule for those divs.
Posted by Bill Posters on 05/22, 06:46 AM
Wow! I love this code! I'm thinking about using it on my soon-to-be stock photography site. :) Thanks for all the great CSS! (And HTML, DHTML, Javascript...hehe. :)
Posted by McKenna on 06/06, 11:33 PM

Perfect! I really like the code! its quite simple and clean.
Posted by jovillartz on 06/08, 02:04 AM
Thanks for this clean and easy-to-implement CSS code, and thanks for creating the CSS section of Dynamic Drive.
Posted by Dan on 06/26, 02:23 PM
Really nice one. I would like if that works cross browser without ny probes.. let me work and see..
Posted by seo tools on 09/12, 04:09 PM

Comment Pages 1 of 3 pages  1 2 3 >


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.