Rounded corners + solid borders???

I can find lots of info about making rounded corners, with and without images, but I cant find anything about how to do it with a solid 1 px border around the whole box.

It will have to be images, i know that much at least, but will I also need images for the horizontals and verticals as opposed to just in the corners?

Anyone got some advice and preferably code examples.

 

You may want to try this: Spiffy Corners. If that doesn't help, I'll suggest another option.

 

I use nifty - nifty / spiffy pretty similar.

There is also a non standards method using CSS 2 only that you can find at Experts Exchange -- no javascript! :
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_21733150.html

 

Spiffy does not give me a border around the whole thing. I can tweak the code by hand but only get borders around the corners, not around the rest of the box.

Here is an example of what I want to be able to create http://www.vividinteriors.ca/ (my day job)

I built those rounded corner boxes with images at top and bottom, and its a <table> layout site.

Notice how the rounded corner boxes have an outline around them, thats what i mean by a 1 px border.

So, now I want to do the same with a css <div> layout.

I'm happy to stick with using images. Tried this method http://www.sitepoint.com/article/css-round-corners-boxes-curves with images for corners but can't find a way to add a 1 pix border around the whole unit without the border pushing the image down by 1 px and exposing the hard corner.

And I don't want to use a javascript option, not sure why, just want something simpler.

 

If I'm getting what exactly you want, you may try visiting this blog. There is an article on the home page that'll guide you how to do rounded corners in pure CSS (no table tags).

Article title is: How to create rounded corner box using CSS

I'm sorry if I still didn't get what exactly you want!

 

Ah ha, I see they talk about adding a border and using margin: -1px to pull the corner images up so they overlap the border. That should work.

Didnt know you could do negative pixels.

Will try this tommorow

Thanks.

 

My pleasure! I hope it works because it's pure CSS method.

 

actually its css + images in the corners.

but the images are called and placed from the style sheet. So maybe that counts as pure css

 

Though I'm sleepy right now, I do have an article bookmarked @ Stumble Upon that does it in pure CSS, without using any image.

I'll find the article and let you know if you are interested.

Good night for now!

 

Same here, very late and about to go to sleep.

If you remember tommorow you can post that pure css version here or PM it to me.

Thanks a lot WHM

 

You are welcome, good sir! I'll PM you the link when I find it. Be assured.

 

WHMTalK,

I wonder if you'd be good enough to post that article link please as I'd be interested in learning how to do this in pure CSS too.

Thanks.

 

You are welcome!

If I find the bookmarked link, I'll post it in this thread.

Cheers!