CSS Rounded Corner


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



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.