CSS rounded corners

16.Sep.2010

To have rounded corners on your page elements you should only use border-radius, as CSS property. However – in reality it won’t work on all browsers. To make CSS rounded corners work in IE, you should use snippet shown.

To use border-radius CSS property in IE, you will need border-radius.htc file. This is a behavior htc file for Internet explorer to make CSS property “border-radius” work on all browsers. At present, all major browsers other than IE shows rounded corners by adding 4 lines of CSS. Download border-radius.htc in order to use CSS rounded corners on your website.

1
2
3
4
5
6
7
div.rounded {
	behavior: url('https://stuntcoders.com/demo/border-radius.htc');
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;
}

Example of CSS rounded corners

CSS rounded corners