How to absolute position imageless corners with css

Question

Hi,

I'm looking for a way to absolute position the four corners used in the following css style. I tried the following, but that wasn't the right one.

.rbottom{display:block; background:#f57f20; position:absolute; top:500px;} 

This is the original css:

.container5 {background:#666666; color:#fff; margin:0 15px;}

.rbottom{display:block; background:#f57f20;}
.rtop{display:block; background:#eaeade;}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background:#666666;}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

.rl1 {margin: 0 0 0 5px; }
.rl2 {margin: 0 0 0 3px; }
.rl3 {margin: 0 0 0 2px; }
.rl4 {margin: 0 0 0 1px; height: 2px;}

.rr1 {margin: 0 5px 0 0; }
.rr2 {margin: 0 3px 0 0; }
.rr3 {margin: 0 2px 0 0; }
.rr4 {margin: 0 1px 0 0; height: 2px;}

Answer 1

It's not entirely clear what you're asking. The way to position something absolutely in CSS is to use the position: absolute property, and then specify where that element should be positioned, e.g.:

.foo {
    position: absolute;
    top: 0px;
    left: 100px;
}

On the other hand, it sounds like you're trying to implement CSS rounded corners. If you don't mind your corners being square (not rounded) in IE, you can use the browser-specific CSS3 rounded corner properties:

.bar {
    border: 1px solid #000000;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

Which should work on Firefox, Safari, and Google Chrome, but not any version of IE.

Answer 2

assuming that .container5 is the wrapper for all the corners, have you tried to add position: relative; to it?