Transparent rounded corners on Google Map

by

It appears that you may be experiencing the same Webkit bug as noted here: Rounded corners fail to cut off content in webkit browsers if position:relative

Also here: CSS3 border-radius clipping issues

I tested this by (via a debugger) modifying your code to add a visible border to the node with the border radius, then I hide the contents. It clearly showed a circle for the outer element. Since Webkit is used in both Safari and Chrome, that would explain those. However, when testing it inside Opera, I seem to be seeing the same bug.

Now, some good news: you might be able to get Webkit to behave using -webkit-mask and an SVG circle. There is an example on this page: http://www.webkit.org/blog/181/css-masks/

This would get you support under Firefox, Safari, and (hopefully) Chrome. (And apparently IE9, since you just tested it!) Which, for all accounts, is about the best you can usually hope to achieve for CSS3 hacks. 😉

More Related Contents:

  1. Set Google Maps Container DIV width and height 100%
  2. Zoom control and streetview not showing on my Google map?
  3. Google Maps v3 – prevent API from loading Roboto font
  4. Is there a CSS selector for elements containing certain text?
  5. How do I hide an element when printing a web page?
  6. ::slotted CSS selector for nested children in shadowDOM slot
  7. Aligning grid items across the entire row/column (like flex items can)
  8. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  9. Nesting CSS classes
  10. How can I force browsers to print background images in CSS?
  11. Is embedding background image data into CSS as Base64 good or bad practice?
  12. How to change an input button image using CSS
  13. Relationship between !important and CSS specificity
  14. Specify an SVG as a background image and ALSO style the SVG in CSS?
  15. Can I change the fill color of an svg path with CSS?
  16. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  17. CSS selector (id contains part of text)
  18. CSS3 ::selection behaves differently in FF & Chrome
  19. Two Divs next to each other, that then stack with responsive change
  20. How to align a div to the top of its parent but keeping its inline-block behaviour?
  21. How can I change the color of an ‘svg’ element?
  22. CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)
  23. Fill only Half a star with SVG
  24. Is it possible to give one CSS class priority over another?
  25. Force sidebar height 100% using CSS (with a sticky bottom image)?
  26. In outlook html email, float does not work
  27. Why magin:auto is not enough to center position absolute or fixed?
  28. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
  29. How to extend css class with another style?
  30. Getting columns to wrap in CSS Grid

Leave a Comment