Modernizr.borderradius is TRUE on device whitout support css border-radius

Problem

I have a div element with css border-radius. My Android 2.2.1 Device with default browser (webkit/533.1) dosn't support border-radius, so i try use modernizr to detect this feature. Problem is that modernizr return true thought border-radius dosn't work. What can I do now? How can I detect it?

<style>
    .border{
       -moz-border-radius: 100%;
       -webkit-border-radius: 100%;
       -khtml-border-radius: 100%;
       border-radius: 100%;          
    }

   .div{
      background: red;
      width:100px;
      height: 100px;                
   }
</style>


<div class="border div"></div>

<script>
  $(document).ready(function(){  
     if (!Modernizr.borderradius) {
       alert ("css border radius is not supported");
       }
  })
</script>

Demo on jsfiddle http://jsfiddle.net/7NvLM/

Problem courtesy of: Honzík

Solution

According to CanIUse, border-radius is supported by the Android 2.2 browser. 2.1 requires a prefix but is also supported. Therefore, Modernizr is reporting correctly.

However CanIUse also notes that Android 2.3 (and presumably earlier) does not support percentage values for the property. That'll be why it's not working for you.

I guess Modernizr is looking at basic feature support (which it has). You may need to write your own more specific test for this particular case.

Solution courtesy of: Spudley

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.