NoShade.net est en vente — Contactez nous si vous êtes intéressé
Le siteTutoriauxInterviews
icone RSS NoShade.net

Accueil » Tutoriaux » Css » Arrondir les bords d'un bloc

Arrondir les bords d'un bloc


Les CSS sont en train d'aller bien loin, de nouvelles propriétées se créent, nous allons voir l'une d'entre elle, bien sympathique, mais pour l'instant uniquement displonible pour les navigateurs dont le moteur est Gecko (Firefox et Camino par exemple).



Vous allez vite voir que la technique est très simple, en effet, elle ne tient que sur une ligne de CSS! ;)

La propriété à utiliser est la suivante :

-moz-border-radius


Suivie d'une valeur, le plus souvent en pixels, mais vous pouvez tout aussi bien la définir en pourcentage ou autre.

Passons directement au code de notre exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
        <head>
        <title>Test</title>
        <style>
        #arrondis {
        height: 200px; /* Hauteur du bloc */
        width: 400px; /* Largeur du bloc */
        background-color: #868B94; /* Couleur du fond */
        color: white; /* Couleur du texte */
        padding: 20px; /* Pour que le texte ne colle pas aux bords */
        border: solid black 2px; /* On met des bords noirs au bloc */
        -moz-border-radius: 35px; /* On applique des arrondis aux bords du bloc */
        }
        </style>
        </head>
<body>
        <div id="arrondis">
                <h1>Bonjour</h1>
                <p>Hello</p>
                <p>Holla</p>
                <p>Hi!</p>
        </div>
</body>
</html>
 


Essayez donc chez vous, ça devrait marcher! :D
Bien entendu, il vous faut Firefox ou Camino pour en voir le résultat.

A noter que pour les navigateurs de type khtml, comme Safari, Shiira ou autre, on dit que l'équivalent de cette propriété sera -khtml-border-radius. Mais pour le moment, cette propriété ne donne de résultat que sous les moteurs Gecko...

Ceci dit, vous le verrez rapidement, les angles ne sont pas lissés, c'est un peu "cradouille" si vous souhaitez faire une interface du "top du top"! ;)

Quant à la compatibilité avec IE... no comment. :D

Amusez vous bien! ;)
Le 24/06/2006 par Legibe

Partager ce tutoriel : icone Scoopeo icone del.icio.us icone Digg icone Facebook icone Technorati icone TwitThis icone Google icone Live icone MySpace icone Wikio icone Mixx icone Reddit icone NewsVine

Vous avez aimé ce tutoriel ?

Faites un don pour nous encourager à en écrire d'autres! :-)

Commentaires :

yosweb a écrit :

merci pour le tutoriel c vachement bon

SirGalaad a écrit :

Bonjour.
Je suis désolé mais je doute que cela fonctionne ...
En effet, votre div a pour id "arrondis" or votre css style porte sur un élément ayant pour id "arrond" ...

A la limite pour que cela fonctionne il faudrait mettre votre style dans la balise <div> directement ...

Mais pris tel quel, aucune chance que cela fonctionne.

Legibe a écrit :

Oups!
j'avais codé un script pour mettre automatiquement un carré de couleur après une couleur hexa dans les tutos, et ça a fait foiré le tuto, il captai "#arrond" comme une couleur haxa et faisait déconner le reste... bref, c'est corrigé, merci pour la remarque!
(là, ça marche du coup!)

SirGalaad a écrit :

Oui-da là c'est nickel :)
merci de cette astuce :)

Legibe a écrit :

de rien!! merci encore à toi :)

Vincent a écrit :

Bonjour, Super ton astuce elle marche super.

pierre a écrit :

Merci beaucoup pour ce tuto de qualité.

Par contre j'imagine qu'il n'éxiste pas d'équivalent chez notre amis internet explorer ?

Merci

Legibe a écrit :

de rien :-)
uniquement à partir d'IE9 en fait... mais il me semble qu'il existe des librairies javascript/plugin jquery pour ça, pas sûr...

Ajouter un commentaire sur ce tutoriel

CSS, Arrondir, Arrondis, Bords, border-radius, Block
Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)