Safari seems to render filter:drop-shadow not correctly on elements using border-radius. Now I found out that in your case, the problem was not connected to this bug. overflow:visible is missing on your img-elements. img { border-radius: 22%; filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75)); overflow: visible; }
backdrop-filter. The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent or partially transparent.
Here's the issue: Google Maps created from the v3 API do not respect the borders of the container having border-radius styling applied, when viewed in a webkit-based browser. The iframed (embed) method does not show the same deficiency. Tested good: FireFox v 19.0.2 (Windows 7) FireFox v 32.0.3 (Windows 8.1) IE9 v 9.0.8112 (Windows 7) IE11
0. I just encountered this same problem, and the best solution I could come up with was to wrap the input element in a div tag and apply the styles to the div instead of the input element. #sidebar div.search-wrapper { background-color:#fff; border-radius: 14px; box-shadow: 1px 1px 2px rgba (0, 0, 0, 0.7) inset; } #sidebar input [type="text
This is done using a slash ( /) between two values: .element { border-radius: 10px / 30px; /* horizontal radius / vertical radius */ } Note: Firefox only supported elliptical borders in 3.5+. Older WebKit browsers (e.g. Safari 4 and below) incorrectly treat 40px 10px the same as 40px / 10px. Values
0. border-radius in NOT available in IE8 and lower. However, you have basically 3 options: in case, it's not crucial not having these rounded borders: just omit it for non-supporting browsers. use image-slices (e.g. sliding-door-technique) use the proprietary .htc and VML to emulate rounded corners in IE.
THFyPW. 105 491 141 253 407 45 443 229 485
border radius not working on iphone
