Solved

Round Corners with CSS without image

Posted on 2009-04-02
8
807 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Industry Leaders: 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 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 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: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

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

617 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