Inset border-radius with CSS3

by

The best way I’ve found to achieve this with all CSS and HTML (no images, etc.) is by using CSS3 gradients, per Lea Verou. From her solution:

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

The net result is a set of transparent gradients with curves. See the full JSFiddle for a demo and to play around with the way it looks.

Obviously this depends on support for rgba and gradient, and accordingly should be treated as a progressive enhancement, or if it’s essential to the design, you should supply an image-based fallback for older browsers (especially IE, which doesn’t support gradient even up through IE9).

More Related Contents:

  1. How do CSS triangles work?
  2. Transparent arrow/triangle indented over an image
  3. Border-radius in percentage (%) and pixels (px) or em
  4. How can I show only corner borders?
  5. CSS triangle custom border color
  6. Wavy shape with css
  7. Invert rounded corner in CSS?
  8. Transparent hollow or cut out circle
  9. How to skew element but keep text normal (unskewed)
  10. How to add border in my clip-path: polygon(); CSS style
  11. Responsive CSS triangle with percents width
  12. Wave (or shape?) with border on CSS3
  13. css skew element and get inner rounded border top
  14. Triangle shape with background image
  15. How to create multi-color border with CSS?
  16. draw diagonal lines in div background with CSS
  17. How can I create a “tooltip tail” using pure CSS?
  18. Slanted Corner on CSS box
  19. Segments in a circle using CSS3
  20. CSS Transform Skew [duplicate]
  21. Circle with two borders
  22. How to create an irregular square shape in css?
  23. Clip path inset circle?
  24. Filling water animation
  25. Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
  26. Make table cells square
  27. Rounded side, not rounded corners
  28. Creating a droplet like border effect in css
  29. Making jagged triangle border in CSS
  30. How to create fluid trapezoid image with css?

Leave a Comment