How to Make Rounded Corner Frame with Gradient Background

[holder34]

Just found this site and am so impressed with the knowledge presented here. Can’t wait to dig in and learn…!

I am trying to construct the CSS and HTML code for the attached image. I have watched Chris’ tutorial and searched the web, however I am unable to find a method that incorporates a background image, or gradient.

[attachment=0]Frame.png[/attachment]

Seems all of the methods I have seen won’t allow a background image behind the content portion of the frame. As those methods use a background image for the sides of the frame so using a gradient background simply won’t work with that method.

I need a flexible frame as it will be used several times throughout the page in different heights and widths. I am shooting for 12-15px radius and a border of 2-3px . The background outside of the frame is white. And of course should work in IE as well as FF.

My initial thoughts would be to use the 4 corner image method but then I get lost trying to construct the 4 borders along with the gradient background for the content section.

Any help would be greatly appreciated!

[Locke]

I know is not a standard yet but CSS3 it’s a great and modern solution.

yo can add , CSS3 attributes to IE , with an JS..

in your header add:

Code:

then for Roundend COrners and Shadow Background :

Code:

I’v been working witht CSS3 for a while and also some HTML5, and I know is not satadard but works great.

[Locke]

And sorry for the standard you can :

cut your image:

[attachment=0]bottom_.png[/attachment]

[attachment=1]cont_.png[/attachment]

[attachment=2]top_.png[/attachment]

Then use:

Code:

HELLO WORLD!

and for a more define gradient , you should use a bigger bottom_.png, or may be isted of using horizontal iamges use vertical ones OR use css3 and with gradient background with repeat-x and width.

Also , check this post:

viewtopic.php?f=2&t=4709

see’a

[holder34]

Hey Locke,

Thanx a bunch for your prompt response!

Unfortunately as you stated CSS3 is not standard at the moment and is not an option as so few browsers would benefit from it.

I appreciate you taking the time to cut the images and post the code, but that method does not use the gradient background in the content section of the frame. Thanx for the link you provided but it basically uses the same technique which won’t work ..

I guess I need a method that would utilize the top and bottom images of the frame, create a border of the same color and thickness for the sides of the frame and then use a gradient image for the content section (middle part) without producing a gap between the gradient and the bottom image.

If anyone could come up with something I would greatly appreciate it!

[Locke]

You can try the same method… But cutting the images in vertical. The only bad thing about this is that you most use a exact width.

[Locke]

check this like :

http://www.roundedcornr.com/

[holder34]

Hey Locke,

Thanx again for your input.

I have tried every online rounded corner creation tool out there.

Nothing seems to work as I wish.

Funny since I have started this project while surfing the web I have noticed that not one website has used this effect…?

Maybe it is out there but I have yet to see it…

I guess I’ll keep messing with the code.

If I ever figure it out I’ll share it here.

Thanx again!

[thotkata]

I appreciate you taking the time to cut the images and post the code, but that method does not use the gradient background in the content section of the frame. Thanx for the link you provided but it basically uses the same technique which won’t work ..

I guess I need a method that would utilize the top and bottom images of the frame, create a border of the same color and thickness for the sides of the frame and then use a gradient image for the content section (middle part) without producing a gap between the gradient and the bottom image.

Awesome Auger

[Author]

Posts