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.
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:
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 >
The use of url(relative/path/here) won't work in Mac IE5...
The inner diveis neccesary because you can't place a background image on top of a border within a single element.
Can I have multiples of this snippet? I'd like two rows of two curly images.
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
If you build lengthy bottom and right borders into the img file, you can do away with the nested divs and simply use:
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.
[code].curlycontainer{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
background: url(brcorner.gif) no-repeat 100% 100%;
}
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.
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. :)
Perfect! I really like the code! its quite simple and clean.
Thanks for this clean and easy-to-implement CSS code, and thanks for creating the CSS section of Dynamic Drive.
Really nice one. I would like if that works cross browser without ny probes.. let me work and see..
Commenting is not available in this weblog entry.
Why not just use it as a background image in the main div and pad away the text from it.