Overlapping corners with CSS

**Valerian** · 15-04-2009

Hello,

Well, I was trying to create a couple overlapping rounded rectangles to the border at the left which overlaps the border on the bottom, which overlaps the one on the right and so on. I also want the borders to sit outside the content area and remain there no matter how the user resizes the window.

Am i approaching this wrong, just not aware of how to use the tool, or am I running into limitations of Design 2?

**AugieBenDoggie** · 15-04-2009

Hi,

Unfortunately my Design 2 has expired so I'm working from memory here.

First, when you set your slice to .jpg you should be able to uncheck the antialias box in the properties pane. First, when you set your slice to. Jpg you should be able to uncheck the antialias box in the properties pane. Also, turn on Snap to Points so that your slices snap to the points on the edges of your rectangles. Also, turn on Snap to Points so that your slices snap to the points on the edges of your rectangles. Does this work for you? Does this work for you?

**Valerian** · 15-04-2009

Hi,

Well, Try this, although it only works on IE since it has a broken-box model, you'd have to work around it for Firefox. I think you could also fix it by adding a background pattern (with a an image that has the 1px blue line, it can be a 1x1 px image) and then add the css that would be something like this:

HTML Code:

.div2{ 
background: #fff url(blue_1px.gif) bottom left repeat-x; 
border-bottom: none; 
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
body{background-color:#000;} 
.div2{ 
border-top:1px solid #f45; 
border-right:1px solid #f45; 
border-left:1px solid #f45; 
background-color:#fff; 
height:100px; 
width:100px; 
} 
.div1 { 
width: 101px; 
border-left: 1px solid black; 
border-bottom: 1px solid #14f; 
} 
</style> 
</head> 
<body> 
<div class="div1"> 
<div class=div2>Overlapping Corners Small</div> 
</div> 
</body> 
</html>