Description
Il existe beaucoup de solutions en CSS pour faire des bords arrondis. Il fallait en quelque sorte entourer l'image de balise DIV pour placer des images rondes dans les coins. C'était pas l'éclate, du coup il était préférable d'inclure les arondis à l'image pour ne pas s'embêter. Cette fois, jQuery offre une alternative beaucoup plus simple qui tiens en quelques lignes. Vous avez cette fois une seule balise où vous paramétrez une classe. Explication !
bords arrondis en ajax javascript sans images
Source
La source se compose de 5 fichiers. Pas de panique, il y en a 3 que l'on peut laisser tel quel ! Du coup il nous reste juste un fichier fonction.js ultra simple à configurer et un fichier index.html qui permet d'afficher les blocs.

fonction.js $(document).ready(
   function(){
    $('.style1').corner({
       tl: { radius: 20 },
       tr: { radius: 20 },
       bl: { radius: 20 },
       br: { radius: 20 },
       antiAlias: true,
       autoPad: true,
       validTags: ["div"] });
});
Nous définissons ici les paramètres.
tl : top left (bord haut gauche)
tr : top right (bord haut droit)
bl : bottom left (bord bas gauche)
br : bottom right (bord bas droite)
Mettez l'antialiasing à true quant à faire !
Mettez aussi l'autopad à true.
Vous pouvez laissez les paramètres par défauts, vous obtiendrez un bord avec un angle de 10px environs. Pour ceci faire : $('.classic').corner(); Ici votre classe s'appelle "classic", c'est aussi simple que ça !

index.html   <div class="style1" style="background:#555; padding:20px; border:4px solid #ccc; width:500px; margin:50px; color:#fff;">Avec angle de 20px et bord.</div> L'appel se fait simplement. Vous indiquez le nom de la classe, puis donnez le style à votre bloc comme à un bloc classique.
Source
source : corners.zip (24Ko)