Script Perfect

Rounded Corner DIV With Only CSS (Round Div)

Posted by Tim On September - 3 - 2009

Technically there is not a way to make true rounded corners with DIV’s without some sort of trickery. If you want to create nice rounded div containers for your content you still can without using images. The method is actually rather simple and makes the CSS look like we have round corners by using borders in a different way.

Want to see how this amazing feat was accomplished? Keep Reading

Everything here really boils down to the CSS, without it we are all lost. The evolution of CSS has let us make some very impressive websites and will continue to evolve. But alas…no stinking rounded corners! Ok, enough ranting, lets get started.

CSS Code

<style type="text/css">

                .rounded { display:block;}

                .round1, .round2, .round3, .round4 {display:block; overflow:hidden;}

                .round1, .round2, .round3 {height:1px;}

                .round2, .round3, .round4 {background:#F6F6F6; border-left:1px solid #C31919; border-right:1px solid #C31919;}

                .round1 {margin:0 4px; background:#C31919;}

                .round2 {margin:0 2px; border-width: 2px;}

                .round3 {margin:0 1px;}

                .round4 {margin:0px;}

                .roundedcontent {display:block; background:#F6F6F6; border:0 solid #C31919; border-width:0 1px;}

</style>

So what we have here is the entire css to form a rounded div. How does it work you ask? Simple, kind of… If you take a look at round1, round2, round3 etc… you will notice that we are offsetting the margin on each and giving them a border color. What this is effectively doing is making a very small area 1-2px in size with a border on one side. When we piece them all together it gives us the illusion of a rounded corner…cool huh?

Now how to lay it out in your HTML. We will place everything inside our main div container and assign it the class of rounded and tile in our round1, round2, etc.. to form a corner. Then to make the opposite corner all we have to do is reverse the order. For the bottom it is reversed and flipped, take a look at what it looks like spaced out:

This is what we are tying to make!

HTML to make the above box:

<div class="rounded" style="width:370px;">

        <p class="round1"></p><p class="round2"></p><p class="round3"></p><p class="round4"></p>

                <div class="roundedcontent" style="padding:5px;">

                This is what we are tying to make!

                </div>

        <p class="round4"></p><p class="round3"></p><p class="round2"></p><p class="round1"></p>

</div>