8
Arrondi
Comment puis-je faire que un ou deux ou trois coins d'un tour de div?CSS coin Divs
A
Répondre
13
Spécifiez les coins que vous voulez:
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;
+0
Alternativement pour trois coins arrondis, arrondissez tous les coins ('border-radius: 15px;') et tournez ensuite sur le coin, vous ne le voulez pas ('border-top-left-radius: 0px;'). – jball
4
Voici une excellente ressource que vous pouvez trouver utile de le faire pour vous et d'apprendre.
Bonne chance!
Eh bien, pour répondre à votre question (en dehors de l'outil):
Un coin (en haut à gauche):
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
Deux coins (en haut à gauche et à droite):
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
Trois coins (en haut à gauche et à droite et en bas à droite)
-webkit-border-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomleft: 0;
border-radius: 10px;
border-bottom-left-radius: 0;
Et ainsi de suite ...
Tout un rayon de 10px, fait très facilement avec l'outil que je recommande.
BTW: Ne manquez pas idlefingers 'réponse, très bonne ressource !!
Voir aussi: Creating rounded corners using CSS
+0
+1: http://css3generator.com/ est également utile. – joksnet
+1
@joksnet Je ne savais pas vraiment à ce sujet mais ça a l'air génial !! Je vais essayer! – Trufa
+0
Vérifiez également la réponse d'egrunin qui vous donnera des options si vous voulez voir une autre option qui pourrait être plus compatible. – Trufa
-1
Aucune des autres réponses travailler avec IE8, voici donc un lien avec beaucoup solutions possibles:
0
Attention: aucune des solutions à ce jour offert des œuvres avec IE <= 8. – egrunin
Je ne peux pas croire que ce n'est pas un doublon :) – Trufa
oh ouais ... il est quand même pas ... – Moon