Return to Snippet

Revision: 44539
at April 13, 2011 19:41 by Savio


Initial Code
/* Actually very well known but easy to forget and hard to memorize */


.yourClassOrId:before{ /* this example is for corners in the top. For Corners in the bottom you have to set the rules according*/
content: url(../img/bg-slider-rounded-topleft.png); /* image placed as content - think img src="..." - to style top-left corner. */
	display: block; /* style the rule */
	height: 3px; /* height of images */
	width: 695px; /* don't ever set width 100%! This will break the css for some browsers. ie the top margin and right margin will be moved by approx 1 pixel. I repeat. Don't set relative sizes!*/
 	background: url(../img/bg-slider-rounded-topright.png) no-repeat top right !important;
	line-height: 0.1; /* Beginning from here this resets the element so there are no annoying margins, paddings, etc that break your layout. The z-index is just for me :D */
	font-size: 1px;
	margin-bottom: -3px;
	position: relative;
	z-index: 1;
	padding: 0;
	border: none;
}

Initial URL


Initial Description


Initial Title
CSS Rounded Corner

Initial Tags
css, image, images

Initial Language
CSS