Absolute positioning for rounded corners

I want to make a box with rounded corners that is horizontally and vertically flexible. I’m using one image: a circle that is 40x40 pixels with a transparent background, and trying to absolutely position four boxes in the corners of my wrapper.

I don’t understand why the two boxes that I’ve absolutely positioned with an offset of left:0 bottom:0 and right:0 bottom:0 appear above the other boxes positioned as left:0 top:0 and right:0 top:0.

When there’s content in the wrapper, which I’ve set to relative positioning, the boxes stay on the left. Do I have to give the wrapper a width and height? If so, that goes against the horizontally and vertically flexible box I wanted.

I tried setting the bottom boxes to left:0 top:100% and left:100% bottom:100% but then the bottom right box moves to the right of where I expected it to be, so I need help…

#wrapper {
	position: relative;
}
#tl, #tr, #bl, #br {
	background-image: url(circle.png);
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	height: 20px;
	width: 20px;
}
#tl {
	left: 0px;
	top: 0px;
}
#tr {
	right: 0px;
	top: 0px;
	background-position: right top;
}
#bl {
	left: 0%;
	background-position: left bottom;
	bottom: 0px;
}
#br {
	background-position: right bottom;
	right: 0px;
	bottom: 0px;
}

The HTML:

<div id="wrapper">
  <div id="content">
    <p>Content for  id "content" Goes Here</p>
    <p>asd</p>
    <p>fasd</p>
    <p>fasd</p>
    <p>fasd</p>
  </div>
  <div id="tl"></div>
  <div id="tr"></div>
  <div id="bl"></div>
  <div id="br"></div>
</div>

Hi,

You’d need to set position:relative on Content and give it a higher z-index than the corners.e.g.


[B]#content{position:relative;z-index:2;}[/B]

For IE6 you would need haslayout on these elements.


#wrapper,#content{zoom:1.0}

Note that IE6 will always be 1px out when the element width and height is an odd pixel measurement and the corner will misalign. That’s why its usually better to use background images on nested elements instead.

As your corners are 20px high each you should probably set a min-height of 40px to start with.


#wrapper {
    position: relative;
    min-height:40px;
}
* html #wrapper{height:40px}/* ie6 treats height as min-height anyway*/

Have you thought about how you are going to get a solid background colour in-between those corners without the background bleeding into the transparent edges of the circle image? Here’s one way and here’s [URL=“http://www.pmob.co.uk/temp/round-transparent-inner-fade.htm”]a better way although it’s not that straight forward. :slight_smile:

Thank you thank you thank you, Paul O’B! I so appreciate your helpfulness. And thanks for the links as well!

If you don’t mind, could you explain why we also need to set relative positioning on the content box that’s in the wrapper? I thought the absolutely positioned boxes were positioned relative to the closest positioned ancestor, which would be the wrapper. I don’t understand how the content box affects the position of the other boxes…

I don’t understand how the content box affects the position of the other boxes…

The absolutely placed corners will by default be placed on top of non positioned elements like your text. Even if this was not the case elements later in the document tree will usually be placed on top of anything that went before if there were overlaps in any way.

Only positioned elements can have a z-index applied so you need to apply position:relative to Content so that it can be given a higher z-index than that of the absolute corners (which will be z-index of auto (basically no z-index) although IE7 and under get this wrong and apply a z-index of zero by default).

Just remember that positioned elements (i.e. not static) will automatically be stacked on top of non positioned elements. To control the stacking levels you need to add position:relative (without co-ordinates so the element isn’t altered) to the non positioned element and then apply a z-index as required.

As Paul mentioned there are always issues with the APO approach to handling it – as a rule I dislike the ‘four classes for four corners’ approach as it’s often problematic for transparency – NONE of the techniques Paul linked to are very transparency friendly even when they claim to be.

The way I like to handle it is to do sliding doors at the top and bottom, as outlined by my “eight corners under one roof” method:
http://www.cutcodedown.com/tutorials/eightCorners/page1.html

I would also try to see if I could get away with ‘close enough anti-aliasing’ instead of using alpha transparency. Not only does alpha transparency have the “needs scripting assistance for IE” issue, they tend to be slow when scrolling on lesser hardware and are generally many times larger than a simple palettized image would be.

If you have a raw tile of that background I could make a ‘close enough’ AA image and the code to go with it for you.

“close enough anti-aliasing” is where you take the desired background image, do a mega gaussian blur on it to get a uniform approximate color of the background, and then render your transparent image over it. You then make that uniform color be 100% transparency. In most cases it looks just as good as an alpha .png in a fraction the bandwidth and without the headaches.

Hi ds60.

I really love your eightCorners! Thanks you :slight_smile: I’m also a fan of sliding doors.

One unrelated thing though, if you don’t mind. I see you use both display and float for this:

.narrowStack {
    display: inline;
    float: left;
    padding: 10px 0 10px 10px !important;
    width: 150px;
}

Can you tell me the reason why? Maybe it’s something I’m missing, as float is the only one I see you’ll need?