...

View Full Version : if div has rounded corner, how to remove borders?



lilqhgal
06-27-2007, 01:50 PM
I have a snippet of code I'm working on. Basically it's a div that has a corner set to the top right of the image. Similar to the rounded corners things I find all over the web, except for one major difference - it only has one rounded corner image. The image itself is also a shade of grey and a darker grey with a 1px border. So, to match the look of the corner image, I set the bg color to the lighter grey and apply a dark grey 1px border to the div (as seen below). However, that puts the border around the image itself and causes the rounded corner to be pointless. So I tried wrapping the content in a div inside that div and applying the border to that, so as to "push" the rounded corner div outside, but that didn't work either... Any idea on how to get this code to work?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#left_box {
float: left;
width: 207px;
}
#left_box .title {
color: #FFFFFF;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
background-image: url(img12.jpg);
background-repeat: no-repeat;
height: 19px;
}
#left_box .content_corner {
color: #000000;
background-color: #F4F4F4;
background-position: right top;
background-image: url(leftFrame_TLcurve.jpg);
background-repeat: no-repeat;
font-size: x-small;
border: none;
}
#left_box .content {
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
height: 100px;
}
-->
</style>
</head>

<body>

<div id="left_box">
<div class="title">Header</div>
<div class="content_corner">
<div class="content">
Lorem ipsum dolor sit amet, bene facilisi.
</div>
</div>
</div>

</body>
</html>


I can't post this live to the net so will attach the two images below.

koyama
06-27-2007, 04:44 PM
Try this:


#left_box .content_corner {
color: #000000;
font-size: x-small;
border: 1px solid #CCCCCC;
background-color: #F4F4F4;
height: 100px;
}
#left_box .content {
background-position: right top;
background-image: url(leftFrame_TLcurve.jpg);
background-repeat: no-repeat;
margin-top: -1px;
margin-right: -1px;
padding-top: 1px;
padding-right: 1px;
position: relative;
}

lilqhgal
06-27-2007, 06:21 PM
Hmm. Seems to sort of work. In IE, it fixes only the top border, but leaves a border on the right that extends up to the corner img. In FF, it's totally out of whack.

koyama
06-27-2007, 07:51 PM
Can you please upload the page to some location so we can inspect for ourselves. If you don't have a host then use a free one e.g. http://www.byethost.com/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum