Been out of the loop for a while.. CSS rounded corners..

Scam

Scam

Scam

Soldato
Joined
20 Oct 2002
Posts
19,031
Location
London
Yes I know!

I haven't done any web design for a very long time and I know this always used to be the most often-asked question of the lot, but is there now an easy way to do this? I'm designing a site which needs ~40px radius rounded corners on the content boxes. Not really sure where to dive in from my searching.. I see there's lots of ways to do it.. CSS3, JS.. etc.. :confused:

I'm looking for something quick and easy!
 
Pho said:
jQuery Corner is extremely quick.

Or you could just use CSS/images. CSS3 won't be supported by all browsers though.
Click to expand...
Thanks, that second link worked a treat.

Now my problem is I have a background that's 4 vertical stripes going down the page, aligned fixed to the top right of the page (so striping down the righthand side of the screen). My main content box (with rounded corners) is fixed size in the middle of the screen, so as you resize the window it 'moves' across my stripes horizontally -- thus showing up the corner images used as they pass over different colours of the stripes. (i.e. the background colour on the corner images doesnt match all of the stripes). Hard to explain but argh! Not sure what to do with that :confused:

EDIT: That probably makes no sense. Here's a screeny :p



So, because the stripes are 'fixed' to the top right of the page, they move under the content as you resize the window, as the content is always centered and moves accordingly when you resize.

Any ideas?
 
Last edited:
Scam said:
Thanks, that second link worked a treat.

Now my problem is I have a background that's 4 vertical stripes going down the page, aligned fixed to the top right of the page (so striping down the righthand side of the screen). My main content box (with rounded corners) is fixed size in the middle of the screen, so as you resize the window it 'moves' across my stripes horizontally -- thus showing up the corner images used as they pass over different colours of the stripes. (i.e. the background colour on the corner images doesnt match all of the stripes). Hard to explain but argh! Not sure what to do with that :confused:

EDIT: That probably makes no sense. Here's a screeny :p



So, because the stripes are 'fixed' to the top right of the page, they move under the content as you resize the window, as the content is always centered and moves accordingly when you resize.

Any ideas?
Click to expand...

Use PNG alpha transparency for the corner images. so they blend to what ever colour backdrop
 
djkav said:
Use PNG alpha transparency for the corner images. so they blend to what ever colour backdrop
Click to expand...
I thought PGN transparency didnt work in IE? :confused:

I've managed to botch it now. I fixed the background image to the centre of the page as opposed to the right. It now moves exactly with the content when you resize. I just had to make the background image wide/long enough to have the stripes on the right side of the page. But hey it's only a 1px high gif so I'm sure the extra won't be noticed!
 
Thanks for that.

I've got another question about the www.roundedcornr.com 's which I've used. I'm modifying the images slightly by extending them width-ways, but after I resave the PNGs and chuck them in, the colours don't match in IE :confused: The hexes are the same so I must be doing something wrong when saving them :confused:
 
You must log in or register to reply here.
Back
Top Bottom