Blog > detail

Just my tiny mind

CSS Round Border With No Image

26-2-2012 Admin General 2 Comments

CSS Round Border With No Image

CSS Round Border With No Image is one of many technique to improve the appearance of your website. Different with other css round border, css round border in this article will use no image. Therefore it will reduce the bandwidth needed to load the page.


If we search in the internet, many css round border tutorials will use image in their corner. Therefore, in this article I will try to explain about how to make CSS Round Border With No Image. And I will try to make it as simple as i can.


First, we need the css code:


.septiadi{width:350px;}

.septiadi .r1{height:1px;margin:0 9px;background-color:black;}

.septiadi .r2{height:1px;margin:0 6px;border-width:0 3px;border-style:solid;}

.septiadi .r3{height:1px;margin:0 4px;border-width:0 2px;border-style:solid;}

.septiadi .r4{height:1px;margin:0 3px;border-width:0 1px;border-style:solid;}

.septiadi .r5{height:2px;margin:0 2px;border-width:0 1px;border-style:solid;}

.septiadi .r6{height:3px;margin:0 1px;border-width:0 1px;border-style:solid;}

.septiadi .content{margin:0;border-width:0 1px;border-style:solid;padding:10px;max-width:100%;overflow:hidden;}

.septiadi .header, .septiadi .footer {margin:0;border-width:0 1px;border-style:solid;padding:0 10px;max-width:100%;overflow:hidden;}


.septiadi .header{ background-color:#bbb;border-color:#aaa;padding-bottom:5px;font-size:20px;color:white;}

.septiadi .top .r2,.septiadi .top .r3,.septiadi .top .r4,.septiadi .top .r5,.septiadi .top .r6{ background-color:#bbb;border-color:#aaa;}

.septiadi .footer{ background-color:#bbb;border-color:#aaa;padding-top:5px;font-size:10px;}

.septiadi .bottom .r2,.septiadi .bottom .r3,.septiadi .bottom .r4,.septiadi .bottom .r5,.septiadi .bottom .r6{ background-color:#bbb;border-color:#aaa;}

.septiadi .content{ background-color:#eee;border-color:#aaa;}

.septiadi .r1{ background-color:#aaa;}


Then the next code, is the HTML. In this case, I divide the HTML code into three session that are Header, Content, and Footer.


<div>

<div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<div>Header Here</div>

<div>

Content Here

</div>

<div>Footer Here</div>

<div><div></div><div></div><div></div><div></div><div></div><div></div></div>

</div>


You can change the class name "septiadi" into other name. The reason I give this name is to avoid crash with other style that you might have already in your website. You can also delete the Header or Footer div if you feel better without it. However, make sure you change the background-color in css for "top" and "bottom" class into "#eee", so it will match with background-color of the content.


The result will look like:

CSS Round Border With No Image
CSS Round Border With No Image

The explaination about the css:

round corner zoom
round corner zoom

The round corner zoom picture is the zoom preview of right top corner. It made by using seven div with different class, start from class R1 to R6 and class either header, content or footer.


In this CSS Round Border With No Image, I use 6 level of div to build the corner. With little bit experiment, you can makeCSS Round Border With No Image with more than 6 level of div to build the corner.

CSS Round Border With No Image CSS Round Border With No Image CSS Round Border With No Image

CSS Round Border With No Image CSS Round Border With No Image CSS Round Border With No Image

CSS Round Border With No Image

word word

CSS Round Border With No Image

CSS Round Border With No Image

CSS Round Border With No Image