Advanced Search

Beveled corners & negative border-radius with CSS3 gradients

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. div {
  2.     background: #c00; /* fallback */
  3.     background:
  4.         -moz-linear-gradient(45deg,  transparent 10px, #c00 10px),
  5.         -moz-linear-gradient(135deg, transparent 10px, #c00 10px),
  6.         -moz-linear-gradient(225deg, transparent 10px, #c00 10px),
  7.         -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
  8.     background:
  9.         -o-linear-gradient(45deg,  transparent 10px, #c00 10px),
  10.         -o-linear-gradient(135deg, transparent 10px, #c00 10px),
  11.         -o-linear-gradient(225deg, transparent 10px, #c00 10px),
  12.         -o-linear-gradient(315deg, transparent 10px, #c00 10px);
  13.     background:
  14.         -webkit-linear-gradient(45deg,  transparent 10px, #c00 10px),
  15.         -webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
  16.         -webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
  17.         -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
  18. }
  19.  
  20. div.round {
  21.     background:
  22.         -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
  23.         -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
  24.         -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
  25.         -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
  26.     background:
  27.          -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
  28.          -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
  29.          -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
  30.          -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
  31.     background:
  32.          -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
  33.          -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
  34.          -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
  35.          -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
  36. }
  37.  
  38. div, div.round {
  39.     background-position: bottom left, bottom right, top right, top left;
  40.     -moz-background-size: 50% 50%;
  41.     -webkit-background-size: 50% 50%;
  42.     background-size: 50% 50%;
  43.     background-repeat: no-repeat;
  44. }
  45.  
  46. /* HTML START */
  47.  
  48. <div><p>The main idea is to have 4 gradients that each occupy a quarter of the element's area (one for the bottom left, one for the bottom, on of the top right and one for the top left). Then you set the background to 4 linear gradients with the same color stops (in this case we wanted the corner size to be 10px*, so it was transparent <strong>until</strong> 10px and then the color we want <strong>from</strong> 10px) except the corners that are 45deg, 135deg, 225deg and 315deg respectively.</p>
  49.     <p><small>*Actually not exactly 10px, it's the length of the hypotenuse of an isosceles right-angled triangle, which is around 14px</small></p></div>
  50.  
  51. <div class="round">By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).</div>
  52.  
  53. /* HTML END */

URL: http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.