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;
}
Share:

2 Responses to CSS Rounded Borders

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

    Thanks CSS Fix Team.

  2. I am very thankful to you for posting such stuff.This really help me lot. Thanks CSS Team.

Leave a Reply

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