CSS Forum

**msaz87** · 08-11-2008, 02:28 AM

Hi all,

I used roundedcornr.com to generate code for a rounded box... but I'm having trouble with getting the bottom right corner to work properly.

You can see what I mean here: http://radarrover.com/demo/example.htm

Here's the page code:

HTML Code:

<div class="roundedcornr_box_703180">
   <div class="roundedcornr_top_703180">&nbsp;</div>
      <div class="roundedcornr_content_703180">
         <p style="margin-top: 0; margin-bottom: 0" align="justify">&nbsp;</p>
            <p style="margin-top: 0; margin-bottom: 0" align="justify">&nbsp;</div>
   <div class="roundedcornr_bottom_703180">&nbsp;</div>
</div>

and the CSS:

Code:

.roundedcornr_box_703180 {
    background: url(roundedcornr_703180_tl.png) no-repeat top left;
}
.roundedcornr_top_703180 {
    background: url(roundedcornr_703180_tr.png) no-repeat top right;
}
.roundedcornr_bottom_703180 {
    background: url(roundedcornr_703180_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_703180 div {
    background: url(roundedcornr_703180_br.png) no-repeat bottom right;
}
.roundedcornr_content_703180 {
    background: url(roundedcornr_703180_r.png) top right repeat-y;
}

.roundedcornr_top_703180 div,.roundedcornr_top_703180,
.roundedcornr_bottom_703180 div, .roundedcornr_bottom_703180 {
    width: 100%;
    height: 30px;
    font-size: 1px;
}
.roundedcornr_content_703180, .roundedcornr_bottom_703180 {
    margin-top: -5px;
}
.roundedcornr_content_703180 { padding: 0 15px;}

Thanks in advance!

**bas** · 08-11-2008, 04:16 AM

Second P-element isn't closed
In your CSS you talk to a DIV inside .roundedcornr_bottom_703180 but in your markup you don't have such a DIV!!

HTML Code:

<div class="roundedcornr_box_703180">
   <div class="roundedcornr_top_703180">&nbsp;</div>
      <div class="roundedcornr_content_703180">
         <p style="margin-top: 0; margin-bottom: 0" align="justify">&nbsp;</p>
            <p style="margin-top: 0; margin-bottom: 0" align="justify">&nbsp;</p></div>
   <div class="roundedcornr_bottom_703180"><div>&nbsp;</div></div>
</div>

Why do you use align="justify", this should better be done with CSS. It's also better to place ALL the CSS in your style.css instead of inside the style-attributes.

**simster** · 08-11-2008, 04:17 AM

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Radar Rover -- Covering Tempe, Tucson, Scottsdale and Mesa</title>

<style type="text/css">
body {
background-color:#caddff;
margin:0px;
}
#box {
width: 254px;
height: 100px;
font-size: 1px;
background-color:#297AFF;
margin:2% auto;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border:5px solid #ffffff;
}

</style>

</head>

<body>


<div id="box">

</div>

</body>
</html>

try this code, it gives you the same effect but with all rounded corners.

**bas** · 08-11-2008, 04:21 AM

Keep in mind simster's code does only work in Firefox!! not in IE, not in opera, ...

**msaz87** · 08-11-2008, 04:41 AM

Worked great... thanks a bunch

**simster** · 08-11-2008, 05:18 AM

my code works in firefox and webkit

if in other browser it makes them square.

**LadynRed** · 08-11-2008, 12:40 PM

There are plenty of other methods that will not fall apart in other browsers, you might want to look into one of those rather than using browser-specific code.

http://www.smileycat.com/miaow/archives/000044.php