Rounded Corner Mystery

[Quintin]

This might seem like a dumb question to some but I´m baffled.

In Chris´ tutorial on ‘Rounded Corners’ I have noticed something in the second example of the five techniques that is interesting.

This is the code from the tutorial:

Code:

Lorem ipsum dolor

And the css…

Code:

.box-two { width:300px; background:#fbeac3; border:1px solid #534515; position:relative; margin:10px 0 }
.box-two .tl { position:absolute; etc. etc. }
.box-two .tr { position:absolute; etc. etc. }
.box-two .bl { position:absolute; etc. etc. }
.box-two .br { position:absolute; etc. etc. }
.box-two .inside { padding:20px }

Now my question:
Why is it, that by just giving the corner divs a position of "absolute", does it make them ‘pop’ into place in four different corners?

After all, there is a div with a class of "inside" that is marked up before the divs that form the corners.
How do they manage to scatter all-around the "inside" div like that?

I´d love to understand this becuase I´ve been doing rounded corners the hard way it seems.

Thanks!

[Quintin]

Mmm… that is very interesting Chris.

Thanks for the explanation – I understand it much better now.

[Author]

Posts