CSS and Cross Browser Rounded Corners

Question

I have been trying to implement a solution for cross browser rounded corners and even though the demo works in all browsers, when I try to implement it in my own code, it works in all browsers except IE8.

Here is my CSS:

body    { background:#ffffff url("images/bg.gif") repeat-x ;
font-family:verdana,helvetica,sans-serif ;
font-size:12px ;
color:#000000 ;
margin:0 auto ;
padding:0 ;
}

.clear  { clear:both } /* clears floats */




/* #container defines layout width and positioning */
#container  { width:1000px ;
margin:auto ;
position:relative ;
z-index:inherit ;
zoom:1 ; /* enables rounded corners in IE6 */
}

#header { width:1000px ;
height:75px ;
padding:10px 0px 10px 0px ;
}

    #header-logo    { float:left ;
    width:255px ;
    height:55px ;
    background:url("http://template.sophio.com/images/logo.png") no-repeat ;
    }

    #header-phone   { float:left ;
    display:block ;
    line-height:55px ;
    background:url("images/header-phone-bg.png") no-repeat ;
    background-position:0px 0px ;
    font-size:28px ;
    color:#900 ;
    font-weight:bold ;
    padding-left:50px ;
    margin:0px 0px 0px 120px ;
    }

    #header-right   { float:right ;
    width:225px ;
    }

        #header-right-translate { display:block ;
        text-align:right ;
        background:#ffffff ;
        line-height:26px ;
        }

        #header-right-social    { display:block ;
        text-align:right ;
        background:#FF9 ;
        line-height:24px ;
        margin-top:5px ;
        }

#navbar { width:1000px ;
height:32px ;
background:#9d9687 url("images/header-bg.gif") repeat-x ;
border:1px solid #494437 ;
-moz-border-radius: 11px 11px 0px 0px ;
-webkit-border-radius: 11px 11px 0px 0px ;
border-radius: 11px 11px 0px 0px ;
behavior: url("border-radius.htc");
}

and here is my HTML:

<!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>New Two Column Right</title>
<link rel="stylesheet" href="../style.css" type="text/css" />
</head>

<body>

<div id="container">
    <div id="header">
        <div id="header-logo"></div>
        <div id="header-phone">888-563-2591</div>
        <div id="header-right">
            <div id="header-right-translate">
            [Google Translate Widget Here]         
            </div>
            <div id="header-right-social">
            [Social Icons Widget Here]
            </div>
        </div>
    </div>

    <div id="navbar">text</div>
</div>


</body>
</html>

The navbar is what I am applying rounded corners to.

In IE8, ALL of my corners are rounded, whereas I only want the top left and right corners to be rounded (they display right in all but IE8).

http://www.w3schools.com/cssref/css3_pr_border-radius.asp - border radius doesn't play nice with IE8. — FiveTools, Apr 12 '12 at 02:09
behavior: url("border-radius.htc"); will only work for all four corners. This is probably your only other option for getting rounded corners in IE8: http://snook.ca/archives/html_and_css/rounded_corners_experiment_ie/ apart from using images — kmb64, Apr 12 '12 at 02:18

score 7 · Answer 1 · edited May 23 '17 at 12:15

7

This problem has been solved by others on stackoverflow by using CSSPIE: http://css3pie.com/

In order for rounded-corners to display properly in IE 8, the element with the rounded-corners must have:

position: relative;

set in the css.

see:

CSS rounded corners in IE8

Border Radius for IE8

Border-radius for IE7 & IE8

also: http://jc-designs.net/blog/2010/07/getting-border-radius-to-work-in-ie/ (for more info on the position:relative hack)

The sass library Compass also offers cross-browser border-radius, but I have no experience using it with ie8

edited May 23 '17 at 12:15

Community

1
1

answered Apr 12 '12 at 02:26

pepperdreamteam

2,772
3
17
15

+1 Why reinvent the wheel - it's already got well-rounded corners !!! Sorry, couldn't resist. on a related note... today I read a source comment - Dropbox no longer supports ie6... – Michael Durrant Apr 12 '12 at 02:28

w3uiguru · Answer 2 · 2012-04-13T04:42:58.773

See fiddle for demo: http://jsfiddle.net/esjzX/1/ , http://jsfiddle.net/esjzX/1/embedded/result/

Css:

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

.rs1{margin: 0 2px}
.rs2{margin: 0 1px}
div.container{ margin: 0 10%;background: #9BD1FA}

HTML:

<div class="container">
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<h1 align="center">Hi!</h1>
    <p>Rounded corners for cross browsers</p>
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>
<br /><br />
<div class="container">
<b class="rtop">
  <b class="rs1"></b> <b class="rs2"></b>
</b>
<h1 align="center">Hi!</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<b class="rbottom">
   <b class="rs2"></b> <b class="rs1"></b>
</b>
</div>

Screen Shot: Pure css bases rounded corners for cross browser compatibility

enter image description here

CSS and Cross Browser Rounded Corners

2 Answers2