Revision: 44539
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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