Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Tips – Canvas, cornerRadius et coins arrondis (rounded corners)

Le composant Adobe Flex Canvas (mx:Canvas) contient une propriété de style "cornerRadius" qui prend une valeur numérique.  Et justement, il me fallait un Canvas ayant des coins arrondis. J'ai donc tenté bêtement de mettre le cornerRadius à 10, mais là, aucun résultat.

Après quelques recherches, il apparait en fait qu'il faut aussi préciser la propriété de style "borderStyle" qu'il faut mettre à la valeur "solid", sinon vos coins arrondis ne seront jamais affichés à l'écran.

Si vous ne souhaitez pas de bordures, mettez la propriété "borderThickness" à 0.

Voici donc le code CSS pour le résultat souhaité:

borderStyle:     solid;
cornerRadius:    5;
borderThickness: 0;

Si vous utilisez votre Flex Canvas en MXML, vous aurez quelque chose comme:

<mx:Canvas borderStyle="solid" cornerRadius="5" borderThickness="0"/>