CSS Round Border With No Image

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 class="septiadi">
<div class="top"><div class="R1"></div><div class="R2"></div><div class="R3"></div><div class="R4"></div><div class="R5"></div><div class="R6"></div></div>
<div class="header">Header Here</div>
<div class="content">
Content Here
</div>
<div class="footer">Footer Here</div>
<div class="bottom"><div class="R6"></div><div class="R5"></div><div class="R4"></div><div class="R3"></div><div class="R2"></div><div class="R1"></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 make CSS Round Border With No Image with more than 6 level of div to build the corner.

 

http://septiadi.com/2011/03/24/css-round-border-with-no-image/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: