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

Question

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/

Answer 1

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.