5 replies [Last post]
bjarman.org
Offline
Regular
Sweden
Last seen: 17 years 18 weeks ago
Sweden
Joined: 2004-02-17
Posts: 11
Points: 0

Hi All!
I have experimented with almost all the existing implementations of creating rounded corners on boxes, they all work fine if you want a solid border colour. I want a box with rounded corners and a shadow around the entire box. This would require four new images that would tile like this:

left-top-corner | top-tile | right-top-corner
left-tile | content of div here | right-tile
left-bottom-corner | bottom-tile | right-bottom-corner

Has anyone done a box like this or is it impossible? The ultimate niceness would be if the top and bottom tiles would stretch with the width of the divs content and the left and right tiles would stretch with the divs height, ie a liquid box.

If anyone has a clue please post back, i really want to get this to work.

Br / Fredrik

bjarman.org
Offline
Regular
Sweden
Last seen: 17 years 18 weeks ago
Sweden
Joined: 2004-02-17
Posts: 11
Points: 0

Rounded corners with shadows tiled

I found a great tutorial wich i modified to fit my needs and now I have a box with 4 corner images and 4 tile images, works great. I can post some code if anyone is interested.

z3phir
Offline
Regular
Romania
Last seen: 17 years 17 weeks ago
Romania
Timezone: GMT+2
Joined: 2004-02-25
Posts: 20
Points: 0

that would be great

bjarman.org please poste the code so evryone will learn from it. 10x in advance

TotalWebFX a small company with a big heart !

bjarman.org
Offline
Regular
Sweden
Last seen: 17 years 18 weeks ago
Sweden
Joined: 2004-02-17
Posts: 11
Points: 0

Rounded corners with shadows tiled

Hi!
First of all the tutorial wich i used is here http://www.sovavsiti.cz/css/corners.html but it needed some additional css to fit my needs, my experiment can be seen at http://bjarman.org/css/roundedcornerstiledborders/, the boxes are completely liquid if one sets the width in % or em, the height expands with the content, very flexible. One only needs to create the images for the corners and for the top, bottom and side tiles. The structure of the code is perhaps not very semantic or beautiful, but hey, it works and it validates to XHTML Strict/CSS 2 in the W3 validators. I hope you find this useful, if you have a better or different solution please post back. Even though this works as intended there is bound to be other ways to acheive the same effect.
BR/bjarman.org

z3phir
Offline
Regular
Romania
Last seen: 17 years 17 weeks ago
Romania
Timezone: GMT+2
Joined: 2004-02-25
Posts: 20
Points: 0

10x

10x for posting the code. Smile

TotalWebFX a small company with a big heart !

artemisia
Offline
newbie
Last seen: 17 years 16 weeks ago
Joined: 2004-03-01
Posts: 3
Points: 0

Rounded Corners

WOW...
The rounded corner is great.
I always wondered how people created rounded corners.
I'll have to try it.
Thanks! Wink