CSS Rounded Borders

Rounded corners can be done with CSS currently for all browsers, except Internet Explorer.

.roundedBordersAll {
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	}

Sometimes we need only several corners to be rounded. Full code for each rounded border follows:

.fullSynthax {
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-webkit-border-top-left-radius: 8px;
	-khtml-border-radius-bottomright: 8px;
	-khtml-border-radius-bottomleft: 8px;
	-khtml-border-radius-topright: 8px;
	-khtml-border-radius-topleft: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-topleft: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}

2 Responses to CSS Rounded Borders

  1. Pingback: URL

  2. Excellent help. It is really compatible on all major browsers. I have used it in my code.

    Thanks CSS Fix Team.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">