Solved

Borders with curves

Posted on 2012-04-04
14
156 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 82

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 82

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
 
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 82

Expert Comment

by:Dave Baldwin
ID: 37807575
Bob, you keep changing the question...
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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 82

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

705 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now