Standard
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */Einzelne Ecken
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;Kurzschreibweise
-moz-border-radius: [oben-links] [oben-rechts] [unten-rechts] [unten-links]
-moz-border-radius: 10px 20px 30px 0;Elliptische Rundung (Firefox 3.5+)
-moz-border-radius-topleft: [horizontal radius] [vertical radius];
-moz-border-radius-topleft: 10px 40px;Elliptische Rundungs-Kurzform (Firefox 3.5+)
-moz-border-radius: [horizontal radius] / [vertical radius];
-moz-border-radius: 10px / 40px;-moz-border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;Oben ist dasselbe wie
-moz-border-radius-topleft: 10px 15px;
-moz-border-radius-topright: 20px 30px;
-moz-border-radius-bottomright: 30px 45px;
-moz-border-radius-bottomleft: 40px 60px;WebKit Elliptische Rundung
Alle Ecken
-webkit-border-radius: 36px 12px;Nur rechte Ecken
-webkit-border-top-right-radius: 50px 30px;
-webkit-border-bottom-right-radius: 50px 30px;
Vielen Dank für die Einbeziehung meiner Ergänzungen. Einige weitere Ergänzungen
Elliptische Rundung:
-webkit-border-top-left-radius: 10px 40px;Elliptische Rundungs-Kurzform
(Hinweis: kein Schrägstrich)
-webkit-border-radius: 10px 40px;Danke, es hat mir sehr geholfen. Was ist mit dem Opera-Browser? Funktioniert das?
Das ist nicht kompatibel mit IE-Browsern. Können Sie mir helfen?
Ich habe immer noch keine Antwort auf meine Frage erhalten. Dieser Code ist nicht kompatibel mit IE-Browsern.
Alle bisherigen Versionen von IE unterstützen kein CSS3. Sie müssen entweder progressive enhancement anwenden (d.h. anständige Browser erhalten abgerundete Ecken, IE nicht) oder Bilder und/oder JavaScript verwenden, um Ihre Ecken abzurunden.
@Prydie
Er sagt, IE tut dies nicht. Weil IE eine schreckliche Verschwendung der Existenz ist.
Wenn Leute IE verwenden und eine bessere visuelle Erfahrung wünschen, sollte das Grund genug sein, auf einen aktuellen Browser zu aktualisieren. Und für die wenigen Leute, die aufgrund von Arbeitsbeschränkungen physisch nicht aktualisieren können, sollten sie arbeiten und nicht nach hübschen Websites suchen.
Als Gemeinschaft müssen wir aufhören, wertvolle Zeit mit einem Browser zu verschwenden, der sich weigert, mit dem Rest der Gruppe gut auszukommen. Irgendwann werden sie den Hinweis bekommen und aufholen oder sterben, in beiden Fällen wird das Internet besser.
Genau das, was JC sagte. IE ist dieses kleine Kind, das Kleber im hinteren Teil des Klassenzimmers isst... Lass ihn einfach machen, was er tut.
Je eher wir aufhören, uns um IE zu kümmern, desto eher wird Microsoft Browser entwickeln, die mithalten können, oder sie ganz einstellen. Tun Sie, was Sie können, um Ihren Layout-Inhalt lesbar zu machen, und vergessen Sie das Design mit IE, weil es Zeitverschwendung ist.
„IE ist dieses kleine Kind, das Kleber im hinteren Teil des Klassenzimmers isst.“ Das ist einfach verdammt witzig!! LMAO!
Ich stimme nicht zu, dass Webdesigner aufhören müssen, sich um hässliche Browser zu kümmern. Ich gestalte eine Website für eine Arztpraxis, die sich an eine Altersgruppe richtet, die hauptsächlich IE verwendet. Nur weil ihr Publikum keinen besseren Browser wählt, heißt das nicht, dass ich nicht die Zeit und Mühe investieren sollte, ihnen ein gut gestaltetes Produkt zu bieten.
Benutzt noch jemand IE???? Seltsame Leute…
Sie können PIE.js verwenden, um abgerundete Ecken in IE-Browsern zu erhalten.
PIE fügt derzeit vollständige oder teilweise Unterstützung für IE 6 bis 8 für die folgenden CSS3-Funktionen hinzu
1) border-radius
2) box-shadow
3) border-image
4) mehrere Hintergrundbilder
5) linear-gradient als Hintergrundbild
Opera unterstützt border-radius noch nicht. Sie können es mit CurvyCorners zum Laufen bringen.
Sie können es zum Laufen bringen, indem Sie CurvyCorners einschließen.
Dann funktioniert border-radius auch in Opera und IE 4.0(!) und neuer.
Danke für die JavaScript-Nachfolge, hoffentlich funktioniert sie in IE6 :)
Ich habe gehört, es gibt jQuery für dasselbe ??
Was ist also besser, dies oder der Bildstil?
Dies (mit oder ohne CurvyCorners, je nachdem, welche Browser Sie unterstützen möchten). Bilder für abgerundete Ecken zu erstellen ist mehr Arbeit, mehr HTTP-Anfragen und mehr Bandbreite als die Verwendung von border-radius.
Das Erstellen von Bildern für abgerundete Ecken ist mehr Arbeit, mehr HTTP-Anfragen und mehr Bandbreite als die Verwendung von border-radius.
Ich hasse wirklich das Problem mit abgerundeten Ecken in IE und anderen Browsern mit mangelnder ordentlicher CSS-Unterstützung.
Gibt es eine schöne und saubere Methode, die in allen Browsern funktioniert? Vorzugsweise ein jQuery-Plugin?
Das einzige Problem ist, dass das CSS bei der W3C CSS Validation Service nicht validiert.
Ich denke, wir sind darüber hinaus, dass irgendjemand sich wirklich um die Validierung kümmert, da die CSS 2.1-Spezifikation noch nicht einmal ordnungsgemäß unterstützt wurde. Ignorieren Sie die Validierung, bis es einen definitiven Spezifikation gibt, gegen die tatsächlich validiert werden kann!
großartig und einfach!
Stimmt es, dass Firefox abgerundete Ecken bei Bildern ignoriert?
Scheint nicht zu funktionieren.
Ja, Firefox hat noch keine Unterstützung für abgerundete Ecken bei Bildern.
Das gesagt, ist es sehr einfach, es in Photoshop zu tun.
Oder Sie könnten das Bild in einen
<
div> legen und die Ecken daran abrunden (overflow:hidden)
Safari benötigt mehr als die Kurzform, wenn Sie unterschiedliche Eckradien wünschen. Sie müssen jede einzelne Ecke ausschreiben.
Um abgerundete Ecken in IE 6-8 zum Laufen zu bringen, benötigen Sie eine HTC-Datei als Workaround. Versuchen Sie dies
http://code.google.com/p/curved-corner/
Laden Sie einfach die Datei herunter und befolgen Sie die Anweisungen. Sie können sie in Ihre aktuellen CSS-Lösungen integrieren.
Es kann ein wenig seltsam sein, befolgen Sie also ALLE Vorschläge und laden Sie die ZIP-Datei mit einem Beispiel herunter, wenn Sie sie benötigen.
Das ist die beste Lösung. Vielen Dank für das Teilen.
Eine großartige Möglichkeit, abgerundete Ecken zu generieren, ist border-radius.com.
Es ist einfach zu bedienen und generiert den CSS-Code für Webkit- und Gecko-proprietäre Erweiterungen sowie die CSS3-Version.
Sie können auch den Wert jeder Ecke festlegen, und es wird dieser Code ausgegeben.
Sie können sich auch ansehen FlexiPanels CSS – eine Dreamweaver-Erweiterung, die abgerundete Ecken-CSS-Boxen ohne Code erstellt.
Hey, Opera 10.5+ und Internet Explorer 9.0+ unterstützen border-radius vollständig!
Na ja, ich hasse IE.....
Das ist nicht das, was ich hier sehe. IE v9.0.8112.16421 und immer noch keine kurvigen Ecken.
Glücklicherweise verwende ich kein IE, ich überprüfe es nur auf Kompatibilität.
Eine Noob-Frage: Wo genau im CSS sollte man diesen Code einfügen, damit er funktioniert? In der body-Definition oder anderswo?
Was wäre die beste Methode, um abgerundete Ecken bei Navigations-Elementen über CSS3 zu implementieren und sie auch in IE zum Laufen zu bringen? Progressive Enhancement funktioniert nicht, da die abgerundeten Ecken für die Navigations-Elemente bestimmt und für das Design essentiell sind.
Sollte ich einfach Bildersetzung für alle Browser wählen oder könnte ich CSS3 und dann ein spezifisches Stylesheet für IE mit Bildersetzung verwenden?
Danke!
Dankeee,,,
Es hat mir sehr geholfen,,,
Ich habe versucht, die Bilder zu verwenden, aber mir gefällt die Verwendung nicht.
Danke....
Danke für einen weiteren großartigen Schnipsel. Das hat mich inspiriert, mich ein wenig mehr um andere Browser zu kümmern.
Warum kann IE das nicht unterstützen und das Leben aller einfacher machen? Ich hasse es, etwas zu stylen und dann herauszufinden, wie ich es in IE reparieren kann!! Leute, benutzt stattdessen Firefox, um es den Designern leichter zu machen :)
Das -khtml fehlt, damit können Sie abgerundete Ecken überall haben, außer in IE, das es nicht verdient!
http://it-things.com/index.php/2011/03/pure-css-rounded-corners-no-images/
Fantastische Artikel und Blog-Theme.
Dies ist mein erstes Mal auf Ihrem Blog, fantastischer Beitrag! Sie haben verschiedene sehr hilfreiche Aussagen gemacht und ich schätze die Zeit, die Sie in Ihre Produktion investiert haben. Es ist klar zu sehen, dass Sie absolut verstehen, wovon Sie sprechen. Ich freue mich darauf, viel mehr von Ihren Website-Inhalten zu lesen. Danke!
Ja, dies ist reine CSS-Rundung, aber das Hauptproblem liegt bei Internet Explorer 6, 7 und 8. Deshalb ist dies für Webdesigner oft ein Kopfzerbrechen. Aber einige Leute haben gerade eine HTC-Datei mit JavaScript geschrieben, die genauso eingebunden werden kann wie ein Hintergrundbild. Platzieren Sie diese HTC-Datei einfach anstelle des Hintergrundbilds. Das funktioniert auch unter IE.
So geht's
.rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
behavior: url(border-radius.htc);
}
Diese Methode funktioniert meistens... aber einige Webhoster unterstützen möglicherweise kein HTC. Aber das ist nicht die Schuld dieser Methode, es ist die Schuld der Webhoster. Aber die Mehrheit der Leute kann jetzt abgerundete Ecken in reinem CSS mit Cross-Browser-Kompatibilität erstellen.
Ups, ich habe etwas in meinem alten Kommentar vergessen.
Verwenden Sie stattdessen diesen Pfad, da border-radius.htc etwas anders funktioniert als Bilder.
behavior: behavior: url(/css/border-radius.htc);
Sie sollten auch nicht vergessen, dass bei allem mit border-radius.htc position: relative gesetzt werden sollte, es sei denn, es gibt bereits eine Position.
Und für beste Ergebnisse verwenden Sie für alle Ecken denselben Radius.
Und verwenden Sie niemals border-radius.htc mit einem anderen IE-Hack.
IE muss die Regeln von CSS3 anpassen, sonst werden sie von anderen Browsern verdrängt. Ausgezeichneter Artikel. Danke.
Unterstützt es abgerundete Ecken beim Hovern? Danke
Sehen Sie sich diesen Link unten an. Dies löst das Problem mit IE in Verbindung mit diesem Artikel.
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
Grüße!
„border-radius.htc“ hilft, den Radius für Divs in IE einzustellen, aber ich möchte den Radius für Bilder in IE einstellen.
Nur mein Senf zum Thema „Hören wir auf, uns um den Kleinen in der Ecke zu kümmern“. Das ist IE, falls Sie die Kommentare dazu verpasst haben.
Die Weiterentwicklung des Webs und die Verschwendung wertvoller, begrenzter Zeit.
Ja, IE-Bashing ist auch mein Lieblingszeitvertreib. Aber als Webdesigner solltet ihr alle schnell von eurem hohen Ross herunterkommen.
Mein Unternehmen entwickelt einen Webshop für einen bestimmten B2B-Zweig, in dem IE7 und IE8 immer noch die am weitesten verbreiteten Browser bei Unternehmen und Shops sind, die bei diesem Webshop bestellen.
Diese Endbenutzer können oft aufgrund von WinXP oder fehlenden administrativen Rechten nicht einmal auf IE9 aktualisieren. Diese Endbenutzer dazu zu bringen, FF oder Chrome zu installieren, liegt bei unserem Kunden, d.h. dem Webshop-Besitzer, und es hat sich als schwierig erwiesen. Viele Endbenutzer sind im Grunde Web- und Computer-Analphabeten.
Wir haben die IE6-Unterstützung letztes Jahr eingestellt und beginnen, IE7 nur noch grundlegend zu unterstützen (kein alternatives CSS für abgerundete Ecken, sie können ihre Divs, Eingaben und Schaltflächen fair und „besonders“ eckig haben). IE8 wird uns jedoch noch jahrelang begleiten. Und IE9 unterstützt CSS3-Verläufe auch nicht für die Katz.
Oft haben wir keine große Wahl, wenn unsere Kunden mit unseren sorgfältig gestalteten Webprodukten Geld verdienen wollen... Geld bewegt die Welt, erinnern Sie sich!
Es funktioniert nicht in IE-Browsern.
Bitte geben Sie einen Code für abgerundete Ecken an, der auch in IE funktioniert.
Verwenden Sie einfach <—< oder <–<, das erledigt die Arbeit.
Verwenden Sie einfach !DOCTYPE html oder meta http-equiv="X-UA-Compatible" content="IE=edge", das erledigt die Arbeit.
Hey, das hat nicht auf der Vorlage meines WordPress-Blogs funktioniert. Bitte sagen Sie mir, was ich tun soll.
Das Einzige, wofür IE gut ist, ist das Herunterladen von Google Chrome & Firefox, damit Sie das Internet tatsächlich nutzen und erleben können ;-)
Danke, die abgerundeten Ecken funktionierten perfekt!
Vielen Dank für das großartige Tutorial.
Ist border-radius jetzt der Standard, der in allen Browsern unterstützt wird? Irgendwie hat der Code im Tutorial in Firefox nicht funktioniert, aber wenn ich border-radius ausprobiere, funktioniert es für mich!
Danke trotzdem für den Tipp.
Wunderbares und schönes Tutorial. Es hat mir sehr geholfen, mich an den Kurzcode zu erinnern
border-radius: oben rechts unten links;
Danke, Sir
Vielen Dankssssssssssssssssssssssssssssssssssss
Ich lerne viel auf Ihrer Website über CSS. Ich habe eine Bitte: Können Sie ein Tutorial zu Mobile CSS erstellen?
Hallo Sir,
Wie ist es möglich, den gegebenen Code zu verwenden?
<html>
<head>
<style type=’text/css’>
ul li a {
width: 100px;
display: block;
text-decoration: none;
-moz-box-shadow: 2px 2px 4px #888;
-moz-border-radius-right: 10px;
}
ul li a:hover {
background: #ebebeb ;
color: #67a5cd;
padding: 7px 15px 7px 30px;
}
</style>
</head>
</body>
<ul >
<li><a href=”#”>nidhi</a></li>
<li><a href=”#”>C++</a></li>
</ul>
</body>
</html>
Liebe Nidhi, lassen Sie mich wissen, welche Art von Navigation Sie wünschen.
Horizontal oder vertikal
Ich brauche border radius für IE-7 und höher, bitte helfen Sie mir.
Vielen Dank für dieses Tutorial, aber wir brauchen eines für Internet Explorer 7 und 8, wenn möglich :) Könnten Sie bitte helfen?!
Danke
Quran
Dieses Tutorial ist sehr hilfreich. Vielen Dank!
Einige wirklich geistlose und jugendliche Kommentare hier in Bezug auf IE. Explorer ist immer noch die Hauptwahl für die meisten unternehmensweiten Websites und Anwendungen. Ihn auf diese Weise abzutun, ist ein Zeichen von Naivität. Wenn ich zu einem Meeting mit einem meiner Großkunden, einer multinationalen Nachrichtenagentur, ginge und ihnen sagte, dass sie nicht bekommen, was sie wollen, es sei denn, sie wechseln zu einem "anständigen" Browser, würden sie meinen Vertrag kündigen und sich an eine erwachsene Ressource wenden, die eine Design- und Entwicklungslösung liefern könnte, die zu ihren bestehenden unternehmensweiten Software-Entscheidungen passt, sei es IE7 oder jede andere Browserlösung.
Ich liebe diese Seite für ihre Einsichten und Hilfsbereitschaft, aber ich frage mich, ob einige dieser Kommentatoren jemals in der realen Welt gearbeitet haben.
In deinem Paralleluniversum, schätze ich.
Browserstatistiken sagen alles. Auch die tatsächliche Anzahl der IE-Benutzer ist aus verschiedenen Gründen geringer als die Statistiken. Wenn IE nicht mit dem Betriebssystem installiert wäre, würde es niemand jemals benutzen.
Ich habe meinem Kunden die Unterstützung für IE verweigert. Ich habe sie herausgefordert, jemanden zu finden, der das Design pflegen und es auch in IE 5, 6 und pixelgenau in 7 ohne JavaScript zum Laufen bringen könnte (das oft für viele Benutzer deaktiviert ist, die niedriger als 7 verwenden, weil sie zu dumm sind, das Betriebssystem zu aktualisieren, und sie die Sicherheit hoch setzen, um dies auszugleichen, und das deaktiviert JavaScript).
Ich habe vergessen zu erwähnen, warum ich mich geweigert habe: Sie wollten IE-Kompatibilität, ohne extra zu bezahlen. Ich kann alles kompatibel machen, indem ich JavaScript verwende oder ein dediziertes Stylesheet für jede IE-Version lade, aber Sie müssen mich bezahlen.
Kein Unternehmen wird Sie dafür bezahlen, es ist nur, wenn Sie über Geld sprechen, dass sie sich entscheiden, es loszulassen.
Der Einzige, der jugendlich ist, bist du, ich glaube, du bietest entweder IE-Kompatibilität kostenlos an, oder du musst sehr einfache Text- und Grafik-Websites in Frontpage erstellen.
Jeder, der multinationalen Enterprise-Kunden sagt, dass er ihre IE-Basis nicht unterstützen wird, entfernt sich von der Welt der Enterprise-Entwicklung. Sie können sich an lokale Fischhändler- und Schönheitsberater-Websites halten und die Arena für Fachleute überlassen, die sich mit Online-Präsenz auf mehreren Geräten und Plattformen beschäftigen. Nur meine zwei Cents.
@Creem – Wie bewiesen. Naiv und jugendlich.
Wenn Sie nicht über die Fähigkeiten verfügen, alle Browser zu unterstützen, sind Sie nur ein halber Handwerker.
Wenn Ihre Kunden nicht bereit sind, Sie zu bezahlen, haben Sie die falschen Kunden.
Wenn Ihre Kunden bereit sind, sich von einem Webentwickler diktieren zu lassen, sind weder Sie noch sie ernst in ihren Bestrebungen.
Mein Unternehmen hat einen wichtigen internationalen Nachrichtenagentur-Kunden mit über 15.000 Mitarbeitern, die Sharepoint im Backend, IE-Browsing und Cloud-Anwendungen nutzen. Haben Sie die geringste Ahnung, wie viel es sie kosten würde, ihr System zu ändern, sowohl monetär als auch durch disruptive Umwälzungen, weil der Webentwickler es nicht unterstützt?
Sie mögen den Begriff "naiv" nicht, aber wir sind, was wir tun.
Das funktioniert nicht in IE8.
tolles Tutorial
Hallo,
Wir entwickeln eine Java-Anwendung mit AngularJS. Abgerundete Ecken funktionieren in IE8 nicht. Ich habe PIE.htc verwendet, dann funktionieren einige dynamische Daten nicht mehr und es werden Fehler auf der Seite angezeigt. Ich denke, das Problem liegt bei AngularJS. Auch abgerundete Ecken funktionieren in dynamischen Inhalts-Divs nicht. In statischen Inhalts-Divs funktionieren sie auch in IE abgerundet.
Können Sie bei diesem Problem helfen?
Vielen Dank & Grüße,
Sanjeeva