Solved

Borders with curves

Posted on 2012-04-04
14
159 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
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

832 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