Is a concave border radius possible?

by

You can give the impression of a concave border using radial gradients on the background. For example, something like this:

#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}

Note that most webkit browsers still require prefixes for radial-gradients, and if you want to fully support older browsers you may need to implement the older gradient syntax too.

More Related Contents:

  1. How do CSS triangles work?
  2. Line before and after title over image [duplicate]
  3. Transparent arrow/triangle indented over an image
  4. Transparent text cut out of background
  5. Border-radius in percentage (%) and pixels (px) or em
  6. CSS triangle custom border color
  7. Wavy shape with css
  8. CSS Only Pie Chart – How to add spacing/padding between slices?
  9. How to add border in my clip-path: polygon(); CSS style
  10. Inset border-radius with CSS3
  11. How to draw a circle with text in the middle?
  12. Responsive CSS triangle with percents width
  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. Hexagon shape with CSS3
  18. Align text on slanted line
  19. Slanted Corner on CSS box
  20. CSS Transform Skew [duplicate]
  21. Circle with two borders
  22. Border within border CSS
  23. Half hexagon shape with one element
  24. Clip path inset circle?
  25. Transparent hollow or cut out shape in HTML
  26. Make CSS3 triangle with linear gradient
  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