CSS - bordure uniquement sur la moitié arrondie d'une image ?

[tflog]

Bonsoir,

Sauriez-vous comment faire pour arrondir la moitié inférieure d'une image, et d'ajouter uniquement à cette partie arrondie une bordure rouge régulière de 1px ?
La partie supérieure peut éventuellement avoir une bordure mais qui doit dans ce cas être blanche (invisible sur fond blanc).
Voici mes 3 essais avec des techniques différentes, l'idée étant en bref que la bordure de couleur s'arrête au niveau de la ligne horizontale (fin de l'arrondi).

1. avec box-shadow, http://jsfiddle.net/sfvgah41/2/ => problème = bordure en dégradé alors que je souhaiterai une "intensité" continue.
2. avec border-bottom, http://jsfiddle.net/sfvgah41/3/ => problème = bordure irrégulière qui est proche de 0 avant la fin de l'arrondi (épaisseur 3px simplement pour que le problème soit plus visible)
3. avec border-bottom right & left rouge et border-top blanche, http://jsfiddle.net/sfvgah41/4/ => problème = le comportement de coloration des couleurs est erratique (épaisseur 5px simplement pour que le problème soit plus visible);

Bon je pourrais me contenter de 1 ou 2, mais si quelqu'un pensait à une solution plus nette, je serai preneur!
-----

[Merlin95]

J'ai jamais utilisé (c'est trop récent) mais peut-être que ce qu'il te faut et qui est adapté, c'est la fonctionnalité "canvas".

Voir : https://developer.mozilla.org/fr/doc...l/Using_images

Mais je pourrais pas t'en dire plus.

[tflog]

Merci pour ta réponse, même si canvas n'a pas l'air suffisamment intuitif pour que j'aie le temps de l'assimiler maintenant...
Je vais rester avec mes approximations...