Solved

Round Corners with CSS without image

Posted on 2009-04-02
8
801 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Basic JavaScript Question 3 39
CSS Position not returning 2 48
Put shading on half of picture 8 28
A simple Float not working. 5 8
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 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

24 Experts available now in Live!

Get 1:1 Help Now