[Tutorial] Rounded Corners on Divs

News: Welcome to Webmasters Ground - the Webmaster Forum

September 07, 2008, 03:05:00 PM

	Welcome, Guest. Please login or register.

User

Welcome, Guest. Please login or register.
September 07, 2008, 03:05:00 PM

Permissions

Articles

Building Search Engine Friendly Web Pages by webmaster

Webmasters Forum » Design and Development » HTML and Website Designing » [Tutorial] Rounded Corners on Divs

[Tutorial] Rounded Corners on Divs

Pages: [1]

« previous next »

[Tutorial] Rounded Corners on Divs
Author	Message

tsdesigns

Newbie

Posts: 2

[Tutorial] Rounded Corners on Divs

« on: November 12, 2007, 11:57:41 AM »

Tested and work in 4 major browsers (Firefox, Internet Explorer, Safari, Opera) - others idk

CSS

Code:

.b1, .b2, .b3, .b4{
font-size:1px;
overflow:hidden;
display:block;
}
.b1 {
height:1px;
background-color:red;
margin:0 5px;
}
.b2 {
height:1px;
background-color:blue;
border-right:2px solid;
border-left:2px solid;
border-color:red;
margin:0 3px;
}
.b3 {
height:1px;
background-color:blue;
border-right:1px solid;
border-left:1px solid;
border-color:red;
margin:0 2px;
}
.b4 {
height:2px;
background-color:blue;
border-right:1px solid;
border-left:1px solid;
border-color:red;
margin:0 1px;
}
.contentb {
background-color: blue;
border-right:1px solid;
border-left:1px solid;
border-color:red;
}
.contentb div {margin-left: 5px;}

Change the red and blue to suit your needs

HTML

Code:

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="contentb">
<div>Round Border!!</div>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

Source

Code:

http://blog.yosle.com/2007/09/20/css-round-corners/