Home PHP JavaScript CSS WordPress APIs .htaccess Other How-To Useful Scripts What I Recommend
Posted on by Aleksandar Gichevski ()
Coding website design into html/css often creates problem for web developers because not all css rules have same support from all browsers. Especially for CSS3 where lack of support and difference in the rules within browsers is large so we must combine the rules and create additional hacks to make sure that our design will look the same in all browsers. In this article I will show you how you can create rounded corners on html element using css that work in all browsers. We are going to achieve this using CSS rules and without images.

What we need?

First what we need is html element where we are going to apply CSS class for rounded corners.







This is our test html element.
In the above code there is div element with class 'element' which applies some basic CSS rules for text and form design and it looks likes this.

Creating class for rounded corners

So to make this element with rounded corners (in our case we are going to use 10px size) we will create new class called 'round' including rules for all browsers.
.round { 
-moz-border-radius:10px;
-webkit-border-radius:10px; 
-khtml-border-radius:10px; 
border-radius:10px; 
}
For Firefox rounded corners we use -moz-border-radius:10px, for Chrome and Safari rounded corners we use -webkit-border-radius:10px for Linux Browsers we use -khtml-border-radius:10px and global CSS3 rounded corners rule is the last line border-radius:10px. The above code add it in header style:

and update the div element in html by adding new class to it:
This is our test html element.

That's it... now you have achieved rounded corners using only css in all browsers, except Internet Explorer... yes IE as always is super different so we need extra hack that will do the work there.

Rounder Corners in IE

To make it work in IE first you need to download this file and add following lines in 'round' class
behavior: url(/css/border-radius.htc);
border-radius: 20px;
To be sure that it works the 'behavior url' must point to the right location of the file. Here is how it should look full code:








This is our test html element.

Other Posts You Might Like

Get a fast, free website audit


Enter your URL below to get full in-depth SEO report and tips.

‚Äč

Useful Scripts

Most Popular Posts

Recent Posts

June 14th, 2014
Website Optimization Using Gzip Compression

June 10th, 2014
Google Search AutoComplete API

May 14th, 2014
What is a Tag Cloud and How to Calculate it by Formula

March 27th, 2014
Error writing file /tmp (errcode 28) Solved!

February 15th, 2014
Fixed CSS & HTML Navigation Bar

February 9th, 2014
Benchmark Your Server (CPU, File IO, MySQL) with SysBench

February 8th, 2014
JavaScript Array Basics

January 29th, 2014
JVZoo IPN API in PHP

January 25th, 2014
Payoneer Debit Card for Freelancers to receive money online

January 24th, 2014
How HTML Color Codes are generated?

Read Latest Posts directly on Facebook

Archive