[Solved] Image Border auto-growth based on content

[Hawk]

I’ve been building my site, slowly learning CSS as I go. But I’m stuck with what i WANT and what the actually terminology is to get it there. I have a background image for a CSS column that is a specific height.
– Seen here: http://savingcontent.zymichost.com/test.html [see left column with grey border]

Problem: The content on the left will fill up once I get more staffing. However, the image will only hold so much. Rather than redraw the image. Is there a way to separate the image into 3 pieces (top – middle – bottom) and have it autogrow as content is put into it? As in, it will detect how many times to repeat the middle image until the content is done, then the bottom will close the border?

I have a feeling it will be more than a CSS background and something different. But any guidance on this and the terminology for what this actually is will be helpful too.

[noahgelman]

If you have a simple border, why not just use {border:(thickness)px solid #(color);}
That would let it stretch as big or small as it wants.

[Hawk]

I could do that. How do I round the borders then?

[rch]

Some references are just here at css-tricks:

• Rounded Corners-snippets
• Rounded Corners-Screencast
• Rounded Corners-Screencast examples

[Hawk]

Awesome thank you. I got what I wanted. I don’t know why i was making it harder for myself.

Solved.

[Author]

Posts