Rounding off the top corners of my layout boxes

Hi,

I have been looking into this for a while now and im not sure where to start i was just wondering how to go about rounding off the top corners of my layout boxes etc... I have read a few threads but not sure what to do exactly.

You will need to create a new image for use on your sideboxes. The image being used is called tile_back.gif. It is also being used for your EZ-Pages header. So, you will need to create an image of a different name and edit your stylesheet to reflect that name:

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #FFA3A2;
background-image: url (../images/tile_back.gif);
padding: 0.5em 0.2em;
background-repeat: repeat-x;
}

You would make the image 150px wide and upload it to your template images folder. You would also need to remove background-repeat: repeat-x;

To make rounded corners on images, I use this site:

http://www.roundpic.com

You can see rounded images I created at that site here:

http://www.oozix.com/store3

Since this is purely a styling issue and not related to useability, you can make a simple addition to your stylesheet that will round the sidebox corners on all modern browsers (even IE9:). (Older browsers will just show square corners.)

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #FFA3A2;
background-image: url (../images/tile_back.gif);
padding: 0.5em 0.2em;
background-repeat: repeat-x;
border-radius: 7px 7px 0 0;
}

This will round the top left and top right corners with a 7px radius. Adjust to taste.

gjh42:

Since this is purely a styling issue and not related to useability, you can make a simple addition to your stylesheet that will round the sidebox corners on all modern browsers. (Older browsers will just show square corners.)

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #FFA3A2;
background-image: url (../images/tile_back.gif);
padding: 0.5em 0.2em;
background-repeat: repeat-x;
border-radius: 7px 7px 0 0;
}

This will round the top left and top right corners with a 7px radius. Adjust to taste.

That won't work in IE8. Needs a little help from a small script. There are a couple different ones out there. I use PIE.htc. Would look like this:

behavior: url (PIE.htc);

PS: I learned something new, though. I didn't know border radius worked on images. Would have saved me a lot of time!

It works on background images - not sure about foreground images. It might depend on whether the image is the element being rounded, or is contained inside a wrapper that is rounded. In the latter case it doesn't really work right.

I did say all "modern" browsers:) If IE8 or earlier support for this appearance feature is important, then you do need special treatment for IE.

Yeah, I'm not sure if any version of IE can ever be considered "modern". :laugh:

Hi,

have tried it and its close to being right. the 150px is not quite wide enough and i keep getting a repeat pattern in the main center boxes . Also my search box is a seperate image as it got edited so will have to do that seperately. Any more advice would be great. Have reset to its original for now though.

If you're going to use a rounded image, you need to make it the same width as your sideboxes display, and separate the stylesheet rules to have different backgrounds for sideboxes and centerboxes.

Did you try the border-radius declaration?

Okay, I just tested it in IE8. It doesn't work. It does work when using PIE.htc, but it needs position relative added. Like this:

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #xxxxxx;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
border-radius: 7px 7px 0 0;
behavior: url (PIE.htc);
position: relative; }

You also need to edit this and remove the top border:

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #xxxxxx;
border-bottom: 5px solid #xxxxx;
margin-top: 1.5em;
}

Here's something interesting. It works fine in Chrome, (of course), but if I add the crutch for IE8 it doesn't work. The same coding works in all the browsers for rounding corners on a standard border.

gjh42:

If you're going to use a rounded image, you need to make it the same width as your sideboxes display, and separate the stylesheet rules to have different backgrounds for sideboxes and centerboxes.

Did you try the border-radius declaration?

No have not tried it yet. Will definately look into it though.
Thanks

Hi,

i have tried border-radius declaration and it works to a point. I still have a sqaure border line aswell as the curved edge. Any suggestions?

See post 10. The square edge is the container; you need to move the border from
.leftBoxContainer, .rightBoxContainer {
to

.sideBoxContent {
border: 1px solid #xxxxxx;
border-top: none;
border-bottom: 5px solid #xxxxx;
}

Hi,

Ive just added the border-radius: 20px 20px 0 0; to the sidebox containers but cant find the center box container.

Hi,

Managed to sort it. Tested it in IE and it all works fine too. Happy days!:clap: Thanks for the help guys.

Which version of IE are you using? It isn't working for me in IE8.

oh, using version 9. how can i fix it?

To work in IE8, border radius requires a little script addition. See post #10.

Hi,

I have done what you said regarding the top border but dont know if it has worked as IE8 is not supported on my system. Could you check it for me please. Thanks.