Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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.


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

hola ps pueden mejora los scripts y darle mas estilo, seria mas comercial
Posted by carlos on 05/18, 07:28 PM
thank you for the code. Its been very useful. We've used a heavily reworked version of this container on our website for the left hand nav. The corner has been taken and a image background slotted in at the top, then a ul li list in there. Seems to work pretty well across browsers.
Posted by Credit Cards on 09/02, 10:28 PM
Thanks for css this tutorial. Easiest way to generate round corner:
Posted by dora on 09/27, 07:07 AM
How can we change this script and insert images on the four corners.. i tried it but i am not good at it.. if you are able to do it then please help..
Posted by saurabh on 12/07, 12:28 AM

Comment Pages 3 of 3 pages  <  1 2 3

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