Solved

Round Corners with CSS without image

Posted on 2009-04-02
8
804 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
tiny glitch in my main slider 3 40
asp.net input html code have it display the content 2 22
Html CheckBox obtain Its Value 5 28
jQuery Dialog Autoresize Bug 2 25
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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 …

821 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