Advanced Search

CSS Rounded Corner

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Actually very well known but easy to forget and hard to memorize */
  2.  
  3.  
  4. .yourClassOrId:before{ /* this example is for corners in the top. For Corners in the bottom you have to set the rules according*/
  5. content: url(../img/bg-slider-rounded-topleft.png); /* image placed as content - think img src="..." - to style top-left corner. */
  6. 	display: block; /* style the rule */
  7. 	height: 3px; /* height of images */
  8. 	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!*/
  9.  	background: url(../img/bg-slider-rounded-topright.png) no-repeat top right !important;
  10. 	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 */
  11. 	font-size: 1px;
  12. 	margin-bottom: -3px;
  13. 	position: relative;
  14. 	z-index: 1;
  15. 	padding: 0;
  16. 	border: none;
  17. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.