Solved

Borders with curves

Posted on 2012-04-04
14
162 Views
Last Modified: 2012-04-30
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.
0
Comment
Question by:BobHavertyComh
  • 7
  • 4
  • 3
14 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 37807241
No, you don't have to use 'id's, you can use classes or even inline styles.
0
 
LVL 9

Author Comment

by:BobHavertyComh
ID: 37807381
How can classes be absolutely positioned??
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 37807436
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Author Comment

by:BobHavertyComh
ID: 37807465
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
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 37807500
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
 
LVL 9

Author Comment

by:BobHavertyComh
ID: 37807567
Using images are fine. In fact, i know I have to do that if some browsers don't support css3
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 37807575
Bob, you keep changing the question...
0
 
LVL 9

Author Comment

by:BobHavertyComh
ID: 37807585
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 37807597
Sorry, I was focusing on the second paragraph.  If you use images, you have to use them on all sides.
0
 
LVL 9

Author Comment

by:BobHavertyComh
ID: 37807639
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37807653
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
 
LVL 9

Author Comment

by:BobHavertyComh
ID: 37807687
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
 
LVL 9

Author Comment

by:BobHavertyComh
ID: 37807729
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37807747
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Date on a table 16 36
Make page layout not change with page 1 24
Table header must be on top 2 31
Boolean 13 24
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question