Webbers Corner

Hello,

I have noticed a few people across the web posting how to make rounded corners with a border.

So here it is.

This consists of 8, yes 8, div tags which all go inside each other. Each on then includes a image which is positions to the corresponding area. There are a total of only 5 images to create this effect as the borders are just a coloured dot so can be repeated on 4 divs.

Here is the coding required in the .html document.

Code:

<div class="round">

<div class="b">

<div class="l">

<div class="r">

<div class="bl">

<div class="br">

<div class="tl">

<div class="tr">

<h1>Hello, this is an example of rounded corners</h1>

<p>Text placed here.</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

As you can see there are a lot of divs but once you get your head round what each does it is reasonably simple. I have named the divs corresponding to the image they hold e.g. tl = top left = tl.gif

Next is for the css coding.

Code:

.round {

	background:#f0f0f0 url(images/dot.gif) 0 0 repeat-x;

	margin:0px 0px 10px 0px;

	color:#666666;

	clear:both;

}

.round .b {

	background:url(images/dot.gif) 0 100% repeat-x;

}

.round .l {

	background:url(images/dot.gif) 0 0 repeat-y;

}

.round .r {

	background:url(images/dot.gif) 100% 0 repeat-y;

}

.round .bl {

	background:url(images/bl.gif) 0 100% no-repeat;

}

.round .br {

	background:url(images/br.gif) 100% 100% no-repeat;

}

.round .tl {

	background:url(images/tl.gif) 0 0 no-repeat;

}

.round .tr {

	background:url(images/tr.gif) 100% 0 no-repeat;

	font-size:12px;

	line-height:16px;

	padding:15px;

}

.round h1 {

	font-size:12px;

	color:#333333;

	margin:0px 0px 0px 0px;

	padding:0px;

}

You may notice that I have added more code to .tr div. This is because this is the final div which contains the text and so, added some font styling and padding which ensures the text stays within the confines of the surrounding box.

And thats it!

You can download the files for this tutorial to copy, look at or whatever you want.

And example of this code working is on my site - http://www.netfuseuk.com.

Great Tutorial Very useful il tell you that now.

tyros8000 Wrote:

Hello,

I have noticed a few people across the web posting how to make rounded corners with a border.

So here it is.

This consists of 8, yes 8, div tags which all go inside each other. Each on then includes a image which is positions to the corresponding area. There are a total of only 5 images to create this effect as the borders are just a coloured dot so can be repeated on 4 divs.

Here is the coding required in the .html document.

Code:

<div class="round">

<div class="b">

<div class="l">

<div class="r">

<div class="bl">

<div class="br">

<div class="tl">

<div class="tr">

<h1>Hello, this is an example of rounded corners</h1>

<p>Text placed here.</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

As you can see there are a lot of divs but once you get your head round what each does it is reasonably simple. I have named the divs corresponding to the image they hold e.g. tl = top left = tl.gif

Next is for the css coding.

Code:

.round {

	background:#f0f0f0 url(images/dot.gif) 0 0 repeat-x;

	margin:0px 0px 10px 0px;

	color:#666666;

	clear:both;

}

.round .b {

	background:url(images/dot.gif) 0 100% repeat-x;

}

.round .l {

	background:url(images/dot.gif) 0 0 repeat-y;

}

.round .r {

	background:url(images/dot.gif) 100% 0 repeat-y;

}

.round .bl {

	background:url(images/bl.gif) 0 100% no-repeat;

}

.round .br {

	background:url(images/br.gif) 100% 100% no-repeat;

}

.round .tl {

	background:url(images/tl.gif) 0 0 no-repeat;

}

.round .tr {

	background:url(images/tr.gif) 100% 0 no-repeat;

	font-size:12px;

	line-height:16px;

	padding:15px;

}

.round h1 {

	font-size:12px;

	color:#333333;

	margin:0px 0px 0px 0px;

	padding:0px;

}

You may notice that I have added more code to .tr div. This is because this is the final div which contains the text and so, added some font styling and padding which ensures the text stays within the confines of the surrounding box.

And thats it!

You can download the files for this tutorial to copy, look at or whatever you want.

And example of this code working is on my sit - http://www.netfuseuk.com.
[/code]

thanx thats really helpful Smile

funny that you did not teach us how to make the image.
and i should comment that this is not a very effective way of doing it, but if you are not worry about loading speed or you don't have many round corners on the page, then i do recommend you use this way.

it is quite efficient actually when you look at the other methods.

tables - well i hate them and you will struggle to validate you page with them.

wide images, well do i need to explain they will increase the loading more.

the images used in it come to a combined kb of less than 5 so they won't even take 1 sec to load.

Just to tell you that there is a problem with this when putting them on top of eachother. the solution is to float all the inside containers.

Dave

dani190

camcool21

forevagrey

Dave