Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Round Corners with CSS without image

Posted on 2009-04-02
8
Medium Priority
?
814 Views
Last Modified: 2012-05-06
Hi E's, it is possible made a round corners without image in css?
If is possible, give me a litle and simple example.

The best regards,
JC  
0
Comment
Question by:Pedro Chagas
8 Comments
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 24055048
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 24055148
Hi, that site have some examples, but the example of round corners without image, the link is broken.
So, do you have other example or a good tutorial? (not meter if use javascript, the only condition is not use image)

Regards,
JC
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 24055190
http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius covers the specification of rounded corners using just CSS

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 3

Author Comment

by:Pedro Chagas
ID: 24055255
Hi, that is for Css3, I'm sorry, I think that solution don't work in IE6. If work, maybe with a hack.
Css3 Is new and the most popular browser versions not read some functions of css3, in particular IE6.
Maybe have a hack or something for css2.
Help me again.

Regards,
JC
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 24055398
IE6 ? Stick with images. Or don't do it at all.
0
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 2000 total points
ID: 24056465
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px
}
.r5
{
      color: red;
      background-color: red;      
}

.r6
{
      text-align: center;
      font-size: 20px;
      color: Black;
      background-color:White;
      padding:8px 5px;
      border-left:solid 5px red;
      border-right:solid 5px red;
       font-weight: bold;
}

</style>
</head>

<body>
<div class="container">
                                                                <b class="rtop" ><b class="r1 r5"></b><b class="r2 r5"></b><b class="r3 r5"></b><b class="r4 r5">
                                                                </b></b>
                                                                <div>
                                                                    <div class="r6">
                                                                        jllkjlkjljlkjlljljljljlkkkkkkkkkkkkkkkkkkkljlkkljlkjjljlkjlkjlkj jlk lkj lkj lkj
                                                                        kl jkljl kjkl jlk jlk jkljlkjlk jlkjlkjlkjlkjlkjkllkjlkj jkljkljlkjkl jkljlkjlkkkkkkkk
                                                                        jkljlkjlkjlkj jkllkjlkjljljlk klj kljjlk jkljlkkkkkkkkkkk <a href="./test_files/test.htm"
                                                                            class="contentpagetitle">test </a>
                                                                    </div>
                                                                </div>
                                                                <b class="rbottom"><b class="r4 r5"></b><b class="r3 r5"></b><b class="r2 r5"></b><b class="r1 r5">
                                                                </b></b>
                                                            </div>
</body>
</html>


It works on all Browsers..
0
 
LVL 5

Expert Comment

by:boro_bob
ID: 24057783
Qwety's solution may 'work' in all browsers, but it's a inelegant solution to say the least. Using all those empty b tags just to achieve a blocky rounded corners effect just seems such a hack.

I personally use the CSS3 rounded corners method, and just accept that IE6 users will see square corners. Its time we moved on and stopped hobbling our design work to make it look good in an out of date browser. http://www.stoplivinginthepast.com

Take a look at the current browser usage stats from w3schools. http://www.w3schools.com/browsers/browsers_stats.asp

If IE6 usage keeps dropping at the rate it has done in the last year, by this time next year usage will be less than 8%. How long do you hope will your web site be around?

If you really need to support IE6 for now, I would suggest using a seperate style sheet for IE6 that uses images for the rounded corners. That way it will be easier to phase out IE6 suport in the future and make the long term maintenance of your site easier.

e.g. - If the browser is IE6 or lower, the IE6styles.css stylesheet is used, which you can use to override styles set in your normal style sheet.
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="IE6styles.css" rel="stylesheet" type="text/css" />
<![endif]-->

0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 24057931
For me, boro_bob is bang on the money.

As long as IE6 can display the content accurately, I give no interest in additional tweaks.

Sure it is still around, but actually getting it to look pixel perfect is not worth my time.

Users of IE6 won't know that there are better looking versions of the page until they upgrade.

Give them the recommendation that a free upgrade is available and move on.
0

Featured Post

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!

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.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

879 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