Rounded Corners

[simonc101]

Hi there,

I would like to have rounded corners on the main page border. I have attached an image to explain what I mean. Can anyone help me get there please.

[tgreer]

There are no rounded corners on your screenshot. HTML doesn't have any element for rounded corners. Newer CSS specifications allow for rounded corners, but few browsers support them. You'd have to use images.

[akanevsky]

There are no rounded corners on your screenshot. HTML doesn't have any element for rounded corners. Newer CSS specifications allow for rounded corners, but few browsers support them. You'd have to use images.

Rounded corners can be easily done without css and with support for ALL browsers.
However, it would be very difficult to make corners in vBulletin because vBulletin is still table-based.

[simonc101]

The image was to display where I require them. I only require the left and right corner on the main page border.

I understand I would have to use images but how would i go about it.

[akanevsky]

Images are not required. You can do it by creating 1px div blocks of varied width. I saw a tutorial somewhere on google, don't have it in my favorites... I'll look it up later. Basically, you just create a couple of <div> rows, "drawing" the border pixel by pixel.

[tgreer]

True, there are lots of techniques. This is an interesting one:

http://www.albin.net/CSS/RoundedCorners/

However, usually this question is an indicator that the person is new to HTML, so such techniques are probably beyond the skill level.

[akanevsky]

The techniques that use images are incompatible with most browsers.
The technique that does not use images, however, is, and it is much more interesting in that you can actually draw out a border of almost any shape WITHOUT IMAGES with just pure HTML and a TINY bit of CSS.

[tgreer]

Browsers have been able to display images since day one! How can a technique which uses an image be incompatible? You simply include the image, extremely straightforward. I would say it's the MOST compatible technique.

For an example, look at Daniweb. We simply use an image for all rounded elements.

Like this:

[akanevsky]

If you like in my manuals, you'll see an example of a technique with no images involved.

[simonc101]

So I can see we can do it 2 ways.

Maybe if you could show me how to do both solutions in Vbulletin then I can try them and let you know my thoughts.