border-top-right-radius

Übersicht

Die CSS Eingenschaft border-top-right-radius legt die Abrundung der oberen rechten Ecke eines Elements fest. Vor Gecko 2.0 (Firefox 4) war diese Eigenschaft unter dem Namen -moz-border-radius-topright bekannt.

Weitere Informationen sind unter border-top-left-radius verfügbar.

Initialwert0
Anwendbar aufalle Elemente; aber User Agents sind nicht gezwungen dies auf table und inline-table Elemente anzuwenden, falls border-collapse collapse ist. Das Verhalten bei internen Tabellenelementen ist momentan undefiniert.. Auch anwendbar auf ::first-letter.
VererbtNein
Prozentwertebezieht sich auf die Größe der Border-Box
Medienvisuell
Berechneter Wertzwei absolute length oder percentage
AnimationstypLängenangabe, Prozentsatz oder calc();
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Formal syntax: <length-percentage>{1,2}
wobei 
<length-percentage> = <length> | <percentage>

Spezifikation

Spezifikation Status Kommentar
CSS Backgrounds and Borders Module Level 3
Die Definition von 'border-top-right-radius' in dieser Spezifikation.		 Anwärter Empfehlung Initial definition
Initialwert0
Anwendbar aufalle Elemente; aber User Agents sind nicht gezwungen dies auf table und inline-table Elemente anzuwenden, falls border-collapse collapse ist. Das Verhalten bei internen Tabellenelementen ist momentan undefiniert.. Auch anwendbar auf ::first-letter.
VererbtNein
Prozentwertebezieht sich auf die Größe der Border-Box
Medienvisuell
Berechneter Wertzwei absolute length oder percentage
AnimationstypLängenangabe, Prozentsatz oder calc();
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
border-top-right-radiusChrome Vollständige Unterstützung 4
Vollständige Unterstützung 4
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Prior to Firefox 50, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung 1 — 12
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -moz-border-radius-topright
IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 10.5
Vollständige Unterstützung 10.5
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari Vollständige Unterstützung 5
Vollständige Unterstützung 5
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung ≤37
Vollständige Unterstützung ≤37
Vollständige Unterstützung ≤37
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 18
Vollständige Unterstützung 18
Vollständige Unterstützung 18
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Prior to Firefox 50, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung 4 — 14
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -moz-border-radius-topright
Opera Android Vollständige Unterstützung 11
Vollständige Unterstützung 11
Vollständige Unterstützung 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari iOS Vollständige Unterstützung 4.2
Vollständige Unterstützung 4.2
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 1.0
Vollständige Unterstützung 1.0
Vollständige Unterstützung 1.0
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Elliptical cornersChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 10.5Safari Vollständige Unterstützung 3WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja
PercentagesChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4
Vollständige Unterstützung 4
Vollständige Unterstützung 1
Hinweise
Hinweise Before Firefox 4, the <percentage> was relative to the width of the box even when specifying the radius for a height. This implied that -moz-border-radius-topright was always drawing an arc of circle, and never an ellipse, when followed by a single value.
IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 10.5Safari Vollständige Unterstützung 5WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 4.2Samsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Verwendet einen nicht standardisierten Namen.
Verwendet einen nicht standardisierten Namen.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Verwandte Themen
  1. CSS
  2. CSS Referenz
  3. CSS Backgrounds and Borders
  4. Handbuch
    1. Resizing background images with background-size [Übersetzen]
    2. Using multiple backgrounds [Übersetzen]
  5. Eigenschaften
    1. background
    2. background-attachment
    3. background-clip
    4. background-color
    5. background-image
    6. background-origin
    7. background-position
    8. background-position-x [Übersetzen]
    9. background-position-y [Übersetzen]
    10. background-repeat
    11. background-size
    12. border
    13. border-bottom
    14. border-bottom-color
    15. border-bottom-left-radius
    16. border-bottom-right-radius
    17. border-bottom-style
    18. border-bottom-width
    19. border-color
    20. border-image
    21. border-image-outset
    22. border-image-repeat
    23. border-image-slice
    24. border-image-source
    25. border-image-width
    26. border-left
    27. border-left-color
    28. border-left-style
    29. border-left-width
    30. border-radius
    31. border-right
    32. border-right-color
    33. border-right-style
    34. border-right-width
    35. border-style
    36. border-top
    37. border-top-color
    38. border-top-left-radius
    39. border-top-right-radius
    40. border-top-style
    41. border-top-width
    42. border-width
    43. box-shadow