Solved

Round Corners with CSS without image

Posted on 2009-04-02
8
800 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:RQuadling
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:RQuadling
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
 
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 40

Expert Comment

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

Accepted Solution

by:
qwerty021600 earned 500 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:RQuadling
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

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

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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 …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

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

19 Experts available now in Live!

Get 1:1 Help Now