-webkit-border-radius: 20px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius: 20px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-radius: 20px; /* Linux browsers */ behavior: url(/my-examples/files/border-radius.htc); /* maybe ALL IE */ } #border-top-right-radius { border-color: green; border-top-right-radius: 20px; /* CSS3 declaration */

-webkit-border-top-right-radius: 20px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius-topright: 20px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-top-right-radius: 20px; /* Linux browsers */ } #border-bottom-right-radius { border-color: blue; border-bottom-right-radius: 20px; /* CSS3 declaration */

-webkit-border-bottom-right-radius: 20px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius-bottomright: 20px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-bottom-right-radius: 20px; /* Linux browsers */ } #border-bottom-left-radius { border-color: orange; border-bottom-left-radius: 20px; /* CSS3 declaration */

-webkit-border-bottom-left-radius: 20px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius-bottomleft: 20px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-bottom-left-radius: 20px; /* Linux browsers */ } #border-top-left-radius { border-color: pink; border-top-left-radius: 20px; /* CSS3 declaration */

-webkit-border-top-left-radius: 20px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius-topleft: 20px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-top-left-radius: 20px; /* Linux browsers */ } #border-complex1-radius { border-color: Gold;

border-radius: 30px 0 30px 0; /* CSS3 declaration */

-webkit-border-radius: 30px 0 30px 0; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius: 30px 0 30px 0; /* declaration for Mozilla browsers like FireFox */ -khtml-border-radius: 30px 0 30px 0; /* Linux browsers */ } #border-complex2-radius { border-color: OrangeRed;

border-radius: 10px 30px 10px 30px ; /* CSS3 declaration */

-webkit-border-radius: 10px 30px 10px 30px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius: 10px 30px 10px 30px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-radius: 10px 30px 10px 30px; /* Linux browsers */ } #border-complex3-radius { border-color: violet;

border-radius: 20px 20px 5px 5px / 40px 40px 5px 5px; /* CSS3 declaration */

-webkit-border-radius: 20px 20px 5px 5px / 40px 40px 5px 5px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius: 20px 20px 5px 5px / 40px 40px 5px 5px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-radius: 20px 20px 5px 5px / 40px 40px 5px 5px; /* Linux browsers */ } table.css3-rounded-corners-table td { border: 0; padding: 7px; vertical-align: middle; }

In this article, I am going to test CSS 3 rounded corners. I do want to know can if I can use them in practice in different browsers. Here are some examples of CSS3 rounded corners and if you can see some rounded corners – congratulations your browser supports them!

Browsers

Before CSS3 appeared, web developers had to use some combinations of DIV’s or other container elements with curved corner images to achieve the desired result. Today, when CSS3 is supported by almost all the popular browsers the approach to make rounded corners is very easier, shorter and faster.

The only one little problem has place, is the compatibility with IE.

Here’s the table of browsers I tested on:

IE workaround

To make curved corners in IE the behavior htc file should be used. You can download the file from here http://code.google.com/p/curved-corner/.

border-radius: 10px; /* CSS3 declaration */
...
behavior: url(border-radius.htc);

There’re some limitations, for example, this behaviour htc file can round only all the corners of the container, but it cannot round only one, two or three specific corners. So, the CSS3 allows to round only right corner, for example, but the behavior htc file doesn’t. Other issues you can find at the page of this htc file.

CSS rules for all browsers

/* CSS3 declaration */
border-radius: 10px; 
 
/* declaration for WebKit browsers like: Safari, Chrome */
-webkit-border-radius: 10px; 
 
/* declaration for Mozilla browsers like FireFox */
-moz-border-radius: 10px; 
 
 /* Linux browsers */
-khtml-border-radius: 10px;
 
 /* maybe ALL IE */
behavior: url(border-radius.htc);

Understanding syntax

The curved corner is a quarter of the ellipse that defines the shape of the corner. To understand that see the image from the W3C:

So, to define the rounded corner the horizontal and vertical radii should be set, but the vertical radius parameter is optional. If you define only one parameter it will be applied to the horizontal and vertical radii.

Now, let’s see the syntax:

border-radius: [<length> | <percentage>]{1,4} [ / [<length> | <percentage>]{1,4} ]?

The first parameter defines the horizontal radius and if the second parameter is missed the vertical radius.

The second parameter defines the vertical radius of the ellipse that defines the shape of the corner.

The ‘border-radius’ sets values for all the four corners.

Examples:

/* all the corners have an equal curved corner */
border-radius: 10px; 
 
 /* works as in the picture above */
border-radius: 55pt / 25pt;

border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius,
border-top-left-radius: [<length> | <percentage>] [<length> | <percentage>]?

The first parameter defines the horizontal radius and if the second parameter is missed the vertical radius.

The second parameter defines the vertical radius of the ellipse that defines the shape of the corner.

All of these properties set the only one specific corner.

Examples:

/* sets the top left corner */
border-top-left-radius: 10px;
 
 /* sets the top right corner as in the picture above */
border-top-right-radius: 55pt 25pt;

More info on syntax you can find at W3C site: http://www.w3.org/TR/2010/WD-css3-background-20100612/#the-border-radius.

Practice

Let’s create a div the corners of which we will curve.

<div id="curved-corners"></div>

To curve all the corners we should write these styles:

#curved-corners {
	width: 100px;
	height: 50px;
	border: 2px solid red;
 
        /* CSS3 declaration */
	border-radius: 20px; 
 
        /* declaration for WebKit browsers like: Safari, Chrome */
	-webkit-border-radius: 20px; 
 
        /* declaration for Mozilla browsers like FireFox */
	-moz-border-radius: 20px; 
 
        /* Linux browsers */
	-khtml-border-radius: 20px;
 
        /* maybe ALL IE  */
	behavior: url(border-radius.htc);
}

By the way, you should download border-radius.htc from Google Code and copy it to the location you need, and then specify the correct path to border-radius.htc. So, let’s look at the example above in work:

Now, let’s curve only top left and bottom right borders. We are still using the same DIV but define another styles.

#curved-corners {
	width: 100px;
	height: 50px;
	border: 2px solid blue;
 
        /* CSS3 declaration */
	border-top-left-radius: 20px; 
	border-bottom-right-radius: 20px; 
 
        /* declaration for WebKit browsers like: Safari, Chrome */
	-webkit-border-top-left-radius: 20px; 
	-webkit-border-bottom-right-radius: 20px; 
 
        /* declaration for Mozilla browsers like FireFox */
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-bottomright: 20px;
 
        /* Linux browsers */
	-khtml-border-top-left-radius: 20px;
	-khtml-border-bottom-right-radius: 20px;
}

We aren’t using htc file for IE because it cannot curve specific corners. It can curve all the four corners only. So, let’s see the example above at work:

Conclusion

After testing how CSS3 can round borders, I can say that it’s cool. Even if you want to curve borders in IE6+ there’s a workaround but it’s a bit limited. I hope that some issues for this IE htc file will be fixed soon. Microsoft promised that IE9 will support CCS3 technique to curve corners. By the way, there’re a lot of popular web sites that have already begun to use CSS3 technique to round corners.

Links

W3C CSS3 Border Radius

W3C CSS3 Border Radius newer doc

Rounded corner HTML elements using CSS3 in IE (Download at Google Code)

By the way, if You have a fixed width block then You have to set its left and right margins to auto and You get the block centered.

In this article I’m going to explain the method I use to center a fluid block element. Here is the Demo.

With help of this method You can center:

• CodeCharge Studio’s Menu (CCS Menu)
• Horizontal CSS Menu
• Any block elements (DIV, SPAN, IMG, UL, etc.)

HTML

<!-- BEGIN Menu Menu1 -->
<div class="MenuStyle" id="Menu1Container">
  <ul class="adxm {Menu1:MenuType} level1">
  ...
  </ul>
</div>
<!-- END Menu Menu1 -->

CSS

#Menu1Container {
        position: relative;
        float: right;
        right: 50%;
}
#Menu1Container ul {
        position: relative;
        float: left;
        left: 50%;
}

So, problems i had to solve for my needs:

• an outer container is a DIV so INPUT always goes on the next line
• inline-block for DIV doesn’t work in IE6/7
• an outer container has width of 100%
• INPUT is absolutely positioned so an outer DIV is collapsed
• width of 100% makes INPUT 6px larger then outer DIV in IE6
• using inline-block, INPUT aligns vertically on the bottom in IE6

YUI files to include

Let’s begin with files to include:

<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/assets/skins/sam/autocomplete.css">
 
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource-min.js"></script>
 
<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/autocomplete-min.js"></script>

Well, i’m explaining below how i’ve achieved an inline YUI AutoComplete layout. The code is well-commented to understand what is happening

HTML

<!-- 
Let's use SPAN becase it has "display: inline" by default.
IE6/7 can apply "display: inline-block" only for elements
that have "display: inline" by default.
Read more: http://www.quirksmode.org/css/display.html.
-->
<label for="input">YUI AutoComplete</label>
<span id="autocomplete">
    <input id="input" type="text">
    <div id="results"></div>
</span>
 
<script type="text/javascript">
/* creating a data source out of js array */
var ds = new YAHOO.util.LocalDataSource(["apples", "apricots", "bananas"]);
 
/* creating a yui autocomplete */
var ac = new YAHOO.widget.AutoComplete("input", "results", ds);
</script>

CSS

/* outer container */
#autocomplete {
    /* behaving like an inline element */
    display: -moz-inline-box; /* for FF less then 3.0 */
    display: inline-block !important;
 
    position: relative;
    /* standard width of a textbox */
    width: 145px;
 
    /* align vertically on the center */
    vertical-align: middle; 
}
 
/* input */
#autocomplete input {
    /* preventing an outer container DIV collapsing */ 
    position: relative;
    /* tweaking to traditional box model
     * width = border + padding + content
     */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box; /* ie8 */
 
    /* CSS Expression to calculate width for the input.
     * 2px border + 1px padding + 1px padding + 2px border = 6px.
     * Only for IE6/7 because traditional box model cannot
     * be tweaked by any css property.
     * currentStyle object - IE css styles as specified by 
     * global style sheets, inline styles, and HTML attributes.
     */
    *width: expression(parseInt(this.parentNode.currentStyle.width)-6+'px');
}

I’ve tested this soluting in FireFox 3.5, Opera 10, IE 6/7/8. YUI version i’m using is 2.8.

Further reading:

• YUI 2 Autocomplete
• CSS Box Models
• Display declarations
• inline-block in IE
• IE runtimeStyle Object
• IE currentStyle Object
• IE style Object