Return to Snippet

Revision: 30018
at August 6, 2010 03:26 by brandonjp


Updated Code
/*
	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;
}

Revision: 30017
at August 6, 2010 03:24 by brandonjp


Initial Code
/*
	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;
}


Initial URL

                                

Initial Description

                                

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

Initial Tags
css, CSS3

Initial Language
CSS