Comment obtenir un seul coin arrondi avec border-radius htc hack et MSIE v: roundrect?

Question

J'ai un problème avec les coins partiellement arrondis. Voir le premier exemple de travail pour la plupart des navigateurs:

.box { 
    display: block; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    background-color: yellow; 
    -moz-border-radius-bottomright: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
} 

Vous pouvez voir que seul le coin inférieur droit doit être arrondi. choix naturel serait d'ajouter une border-radius.htc hack dans une instruction conditionnelle IE:

.box { 
    border-bottom-right-radius: 20px; 
    behavior:url(border-radius.htc); 
} 

Ce ne fonctionne pas parce que le fichier est border-radius.htc que la valeur normale accède à rayon de frontière (this.currentStyle [ « border-radius »]). VML utilisé par le hack est roundrect qui ne prend en charge qu'un seul pourcentage pour arcsize.

Alors je me demandais s'il y avait un autre moyen de contourner le problème en utilisant d'autres éléments VML?

Un autre problème est que htc-file ne supporte pas les bordures mais peut être corrigé avec l'attribut stripped de VML. Les coins astucieux par exemple ne fonctionnent pas bien avec les coins du tout.

Answer 1

j'ai pu obtenir de travailler avec border-radius: 0 0 10px 10px; et htc de http://css3pie.com/

Answer 2

L'autre solution: border-bottom-right-radius:10px; ne pas faire les calculate CPU arrondis à la frontière non nécessaires