Div Corner Images

[Dysan]

Hi,

 

Whats the best way to add rounded corner images to a div?

[ayok]

Probably not the best way, but just check

[haku]

Interesting article!

 

 

How to do it with images:

 

Here is the markup

<div">
    <div id="top_row">
        <div id="top_left"></div>
        <div id="top_right></div>
    </div>
// content goes here
    <div id="bottom_row">
        <div id="bottom_left></div>
        <div id="bottom_right></div>
    </div>
</div>

 

and here is the CSS:

#top_row, #bottom_row
{
    position: relative;
    width: 100%;
    height: ___px; //set this to the height of the rounded corners image
}

#top_left
{
    background: url(path/to/image.jpg); //set the actual background image here
    height: ____px; //set this to the height of the image.
    width: _____px; //set this to the width of the image.
    position: absolute;
    left: 0;
    top: 0;
}

#top_right
{
    background: url(path/to/image.jpg); //set the actual background image here
    height: ____px; //set this to the height of the image.
    width: _____px; //set this to the width of the image.
    position: absolute;
    right: 0;
    top: 0;
}

#bottom_left
{
    background: url(path/to/image.jpg); //set the actual background image here
    height: ____px; //set this to the height of the image.
    width: _____px; //set this to the width of the image.
    position: absolute;
    left: 0;
    bottom: 0;
}

#bottom_right
{
    background: url(path/to/image.jpg); //set the actual background image here
    height: ____px; //set this to the height of the image.
    width: _____px; //set this to the width of the image.
    position: absolute;
    right: 0;
    bottom: 0;
}

 

Note: I just typed this off the top of my head, I didn't copy it from anywhere, so there may be some syntax errors, You will probably need to make some minor adjustments for your own situation. But this is the basic concept behind it.