Posted By

brandonjp on 08/06/10

Tagged

css
CSS3

Versions (?)

Last Edited at 08/06/10 03:24am

Statistics

Viewed 756 times

Favorited by 2 user(s)

Related snippets

CSS - CSS3 border-radius - understanding CSS3 Moz Mozilla KHTML Webkit Border Radius.css

/ Published in: CSS

Highlighted TextExpand

/*
	201008051249 - brandonjp - me trying to remember css/moz/webkit border radius
	Thanks to Jacob Bijani - CSS Border Radius http: //bit.ly/8Y8cJT
	Thanks to CSS Border Radius : : Richard A. Johnson http: //bit.ly/c9FclS
*/

CSS3 {
	border-top-left-radius: 22px;
	border-top-right-radius: 44px;
	border-bottom-right-radius: 66px;
	border-bottom-left-radius: 88px;
}

MOZILLA {
	-moz-border-radius-topleft: 22px;
	-moz-border-radius-topright: 44px;
	-moz-border-radius-bottomright: 66px;
	-moz-border-radius-bottomleft: 88px;
}

KHTML {
	-khtml-border-top-left-radius: 22px;
	-khtml-border-top-right-radius: 44px;
	-khtml-border-bottom-right-radius: 66px;
	-khtml-border-bottom-left-radius: 88px;
}

WEBKIT {
	-webkit-border-top-left-radius: 22px;
	-webkit-border-top-right-radius: 44px;
	-webkit-border-bottom-right-radius: 66px;
	-webkit-border-bottom-left-radius: 88px;
}

TOP-LEFT {
	border-top-left-radius: 22px;
	-moz-border-radius-topleft: 22px;
	-khtml-border-top-left-radius: 22px;
	-webkit-border-top-left-radius: 22px;
}

TOP-RIGHT {
	border-top-right-radius: 44px;
	-moz-border-radius-topright: 44px;
	-khtml-border-top-right-radius: 44px;
	-webkit-border-top-right-radius: 44px;
}

BOTTOM-RIGHT {
	border-bottom-right-radius: 66px;
	-moz-border-radius-bottomright: 66px;
	-khtml-border-bottom-right-radius: 66px;
	-webkit-border-bottom-right-radius: 66px;
}

BOTTOM-LEFT {
	border-bottom-left-radius: 88px;
	-moz-border-radius-bottomleft: 88px;
	-khtml-border-bottom-left-radius: 88px;
	-webkit-border-bottom-left-radius: 88px;
}

CSS 3 {
/* 5px radius on all 4 corners of the table */
	border-radius: 5px;

/* 5px radius on top left and bottom right corners only */
	border-radius: 5px 0 5px 0;

/* 5px radius on bottom left and top right corners only */
	border-radius: 0 5px 0 5px;

/* 5px radius on the top left corner only */
	border-top-left-radius: 5px;
/* 5px radius on the bottom left corner only */
	border-bottom-left-radius: 5px;
/* 5px radius on the top right corner only */
	border-top-right-radius: 5px;
/* 5px radius on the bottom right corner only */
	border-bottom-right-radius: 5px;
}

Mozilla (Firefox) {
/* 5px radius on all 4 corners of the table */
	-moz-border-radius: 5px;

/* 5px radius on top left and bottom right corners only */
	-moz-border-radius: 5px 0 5px 0;

/* 5px radius on bottom left and top right corners only */
	-moz-border-radius: 0 5px 0 5px;

/* 5px radius on the top left corner only */
	-moz-border-radius-topleft: 5px;
/* 5px radius on the bottom left corner only */
	-moz-border-radius-bottomleft: 5px;
/* 5px radius on the top right corner only */
	-moz-border-radius-topright: 5px;
/* 5px radius on the bottom right corner only */
	-moz-border-radius-bottomright: 5px;
}

KHTML (Konqueror) {
/* add -khtml- in front of the CSS 3 styles */
	-khtml-border-radius: 5px;
}

Webkit (Safari/Chrome) {
/* add -webkit- in front of the CSS 3 styles */
	-webkit-border-top-right-radius: 5px;
}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.