CSS Rounded Corners In All Browsers (With No Images)

n the past two years, increased browser sup­port has trans­formed CSS3 from a fringe activ­ity for Safari geeks to a viable option for enter­prise level web­sites. While cross-browser sup­port is often too weak for CSS3 to hold up a site’s main design, front-end devel­op­ers com­monly look to CSS3 solu­tions for pro­gres­sive enhance­ment in their sites. For instance, a devel­oper might add a drop-shadow in Fire­fox, Safari and Chrome using

1
-moz-box-shadow

and

1
-webkit-box-shadow

, and then be com­fort­able with this design enhance­ment falling off for IE users.

But wouldn’t it be great if IE users could see the bet­ter ver­sion of the page? For­tu­nately there are cross-browser hacks for the more com­mon CSS3 attrib­utes. These hacks not only allow CSS3 attrib­utes to work in all browsers, but in turn allow design­ers and devel­op­ers to use CSS3 in the cen­tral styling of their sites.

In this arti­cle we’ll walk through get­ting rounded cor­ners work­ing in all browsers. Fire­fox, Safari and Chrome are easy with the

1
border-radius

prop­erty, but we’ll have to jump through some extra hoops to get it work­ing in IE and Opera.

After only a few com­pro­mises, we will have CSS rounded cor­ners work­ing in all browsers, and with­out using any images. Wel­come to the ‘No Image UI Club’!

Read the entire arti­cle here; Jon Raasch’s Blog.




Tags: ,

3 Responses to "CSS Rounded Corners In All Browsers (With No Images)"

Leave a Comment

*

Get Adobe Flash player