/ Published in: CSS
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* 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; }