CSS Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 308,424 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 3,257 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Rounded corners without images - (For all browsers), get rounded corners on an element for almost all browsers

Options

devangnegandhi
Group Icon

13 Sep, 2007 - 08:19 AM

Post #1

ok ok....you must be thinking that - "rounded corners without images" is something that has been already posted here. ya I know, but that one can be used only in Mozilla i think..... but definitely not in IE. Here I use a completely different method of getting a rounded corner by purely using basic CSS (which thus results in its compatibility with almost all the latest browsers) , and this code is not which I have written, but by a web designer named Alessandro Fulciniti and he has called this piece of code as Nifty Corners and if you want to get more info on this just go to HTML.it

The basic idea is to use a set of inline tags with appropriate margins and colour. The following will give you corners with quite a descent size of roundness.

CODE

The next piece of code is very similar but will give you smaller corners

CODE

The primary reason to use inline tags here was because inline tags can be used inside any other tag. I am using here a tag but you can even use other inline tags like 

The basic CSS for the above code is something like this

CODE

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} //the above 4 classes are for big corners

.rs1{margin: 0 2px}
.rs2{margin: 0 1px} //the above 2 classes are for small corners
div.container{ margin: 0 10%;background: #9BD1FA}

the above CSS will make the corners rounded. The logic used here is the we use a series of tags inside a mother tag at the starting and at the end of our <div> tag. The no of tags to be used is usually 4 for a descent size of roundness and 2 if you want a smaller rounded corner. But that completely depends on you. Then for each individual tag inside it give decreasing values of left and right margin usually with a difference of 2px between 2 consecutive tags to get a curve. (if you give only a difference of 1 px then you'll end up just getting a diagonal line instead of a curve).

The technique works even on floated, absolute positioned or percentage-width elements. It fails on element with fixed height, or with padding. Both of the problem could be easily solved with an extra wrapper around the content.

Known bugs are: text-indent won't work on the element that has been rounded in Opera, and IE (both Mac & version 6 PC) would mess up on floated elements without specific width.

The support should be extended to all modern browsers: the technique has been tested with success in Internet Explorer 6, Opera 7.6, Firefox 1.0, Safari 1.1 Mac IE. It fails on IE 5.x PC.

Following is an example implementing the above technique. Just copy the following code, make an .html file and view it in any browser.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
 overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

.rs1{margin: 0 2px}
.rs2{margin: 0 1px}
div.container{ margin: 0 10%;background: #9BD1FA}
</style>
</head>

<body>
<div class="container">

 

<h1 align="center">Hi!</h1>
 This is an implementation of the Nifty Corners With big corners.

 

</div>
 
<div class="container">

 

<h1 align="center">Hi!</h1>
 This is an implementation of the Nifty Corners With small corners.

 

</div>
</body>
</html>