Borders with curves

What is the easiest way to make rounded corners with borders without using the latest and possibly non browser compatible css3 features?

 I can easily do this using an outer and inner div and absolute positioning corner images in the outer div over the corner border of the inner div, but then i have to use ids and I want these corners on many boxes on the page so i need to do it through classes.
LVL 9
BobHavertyComhAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
No, you don't have to use 'id's, you can use classes or even inline styles.
0
BobHavertyComhAuthor Commented:
How can classes be absolutely positioned??
0
Dave BaldwinFixer of ProblemsCommented:
I probably wouldn't do it that way but...

top left corner - top:0;left:0;
top right corner - top:0;right:0;
bottom left corner - bottom:0;left:0;
bottom right corner - bottom:0;right:0;
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

BobHavertyComhAuthor Commented:
Hi Dave, this is fine for rounded corners if you are not dealing with borders. When borders come into play, you have the problem of the border part of the corner image being inside the border of the container, so they don't line up
0
LZ1Commented:
Well, without images and using CSS3, I'm not sure what's really left.  You can do absolute positioning, but as Dave said, I wouldn't suggest it.

You can use CSS and that's probably the best way to do it honestly.  However, in order to have IE play nicely you'll have to use a behavior.  

See here: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BobHavertyComhAuthor Commented:
Using images are fine. In fact, i know I have to do that if some browsers don't support css3
0
Dave BaldwinFixer of ProblemsCommented:
Bob, you keep changing the question...
0
BobHavertyComhAuthor Commented:
Here is my question again. It says without css3. no change.

"What is the easiest way to make rounded corners with borders without using the latest and possibly non browser compatible css3 features?"
0
Dave BaldwinFixer of ProblemsCommented:
Sorry, I was focusing on the second paragraph.  If you use images, you have to use them on all sides.
0
BobHavertyComhAuthor Commented:
Dave, i know i have to use images on all corners. This is easy if the box doesn't have a border. When the box doesn't have a border, i can lay down 4 divs on top of each other and place background images on each of their four corners.; i already know this technique. The problem is that when there is supposed to be a border around the container and it's rounded corners, the background images fall inside of the border for the container, so the outside border of the corner is inside of the corner for the container and therefore both the corner image and the square corner bordrer of the container are visible, which means both a rounded and square corner are visible. Does this make things a little more clear?.
0
LZ1Commented:
Honestly, CSS and using a filter is probably the best way to go.  When using images, if you don't do it correctly your going to spend a lot of time troubleshooting in different browsers and getting things to line up.
0
BobHavertyComhAuthor Commented:
These latest css3 techniques are not supported in many versions of IE and perhaps some other browsers. This is why I'm asking about a non CSS3 technique

I could fake the border of the container by using 4 divs and a background image on each that would create the 4 sided border within the container rather than outside it. So if i set my container to have no border and use these four divs with background images, i will have a four sided border on the inside of the container. Then, i could use 4 more divs with the corner images as background images in different corners. The problem is that my markup would now container 8 nested non semantic divs, which is very sloppy.
0
BobHavertyComhAuthor Commented:
So  already know two different ways to do this,

1) four nested divs w/ background image to create each border . 4 more nested divs with corner image as background for each of the 4 corners. 8 divs

2) Two divcs. One div containing 4 absolutely positioned items for each corner and an imnner div that has the inner container border.

2 is very clean as it only needs 2 divs and 4 images. The problem is that since it uses absolute positioning, if I have multiple boxes on the page that i want this look for, i would have multiple individual corner ids for each box and for all boxes. So each box would have it's own, distinct images that are all individual ids

 but neither are very appealing and I was hoping someone might know a clever trick that I didn't think about.
0
LZ1Commented:
I do agree with you about the images. However, do you know what your target demographic is? Any Firefox/Safari/Chrome client that has been released in the past few years will support the CSS3 border-radius.  

The only reason I'm making this argument and being persistent is because I don't want to see anyone take a step backwards. The URL I provided is probably the best semantic way to do it, with no added markup.  When we discuss semantics and separation from content and styling we have to talk about rounded corners.  

The URL  I provided is using the browser's own extensions to make the border radius. IE will be the only one that doesn't have that behavior straight out of the gate and therefore needs some help.  That's where the filter comes in.

Overall it will be your call, however I think you'll find that if you ask 95% of the experts here they will go with a CSS solution and either Javascript IE, hack IE or let IE degrade.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.