CSS-Eigenschaft: border-top-left-radius, Kategorien: Rahmen (allgemein), Backgrounds and Borders (CSS 3)
Abgerundete Ecken links oben
Bestimmt den Radius der Rundung der linken oberen Ecke.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Abgerundete Ecken links oben |
| 0 |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Rahmen (allgemein), Backgrounds and Borders (CSS 3):
- background
- background-attachment
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- Aktuelle Seite: border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-shadow
- box-sizing
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
Folgendes ist beim Einsatz von border-top-left-radius zu beachten:
- border-top-left-radius steuert die Rundung der linken oberen Ecke.
- Werte können absolut in PX, PT usw. oder relativ als EM oder %-Wert angegeben werden.
- %-Werte verhalten sich relativ zur Größe des betreffenden Elements, hier kann es zu elliptischen Rundungen kommen.
- Es können 1 oder 2 Werte angegeben werden. 1 Wert steuert eine kreisförmige Rundung, werden 2 Werte angegeben, wird über diesen eine Ellipse zur Darstellung der Rundung berechnet. Anders als in der Kurzschreibweise border-radius werden die beiden Parameter nicht durch einen / getrennt!
- Firefox und Safari, jeweils vor der Version 4 benötigen das entsprechende Vendor-Präfix. Allerdings weicht die Schreibweise für den Firefox deutlich von der Standardschreibweise ab:
- Firefox: -moz-border-radius-topleft
- Safari: -webkit-border-top-left-radius
- Opera unterstützt keine Rundung an Buttons oder anderen Input-Feldern.
- Safari, Chrome und Opera stellen Rundungen an Bildern in Kombination mit Rahmen nicht sauber dar.
- Hat die CSS-Eigenschaft border-collapse den Wert collapse, wird border-radius außer Kraft gesetzt. Der Internet Explorer 9 stellt in dem Fall zwar keine Tabellenrahmen an, aber die Zellen behalten die Rundung.
- Weitere Informationen unter der Kurzschreibweise border-radius.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Hinweis
Für ältere Browserversion ist CSS3 Pie eine gute Ergänzung (wird auch hier auf CSS-Wiki.com eingesetzt!) - das funktioniert sogar im IE 6!
Weiterführende Informationen zu border-top-left-radius:
- W3C Spezifikation:
http://www.w3.org/TR/css3-background/#border-top-left-radius
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
border-top-color - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
border-top-right-radius
Beispiele
HTML:
<div id="example-1">border-top-left-radius</div>CSS:
#example-1 {
border: 2px solid #bb0000;
padding: 20px;
border-top-left-radius: 15px
}
/* Angabe in Pixel */Beispiel Nr. 1 So sieht's aus:
border-top-left-radius
HTML:
<div id="example-2">border-top-left-radius</div>CSS:
#example-2 {
background-color: #DE00FF;
padding: 20px;
border-top-left-radius: 2em;
}
/* EM-Wert. */Beispiel Nr. 2 So sieht's aus:
border-top-left-radius
HTML:
<div id="example-3">border-top-left-radius</div>CSS:
#example-3 {
width: 200px;
height: 100px;
border: 2px solid #5C00B7;
border-top-left-radius: 50px;
}
/* Ohne ein padding kann Text über den Rahmen hinaus laufen. */Beispiel Nr. 3 So sieht's aus:
border-top-left-radius
HTML:
<div id="example-4"><img src="img/american_football.jpg" alt="American Football"></div>CSS:
#example-4 img {
border: 5px solid black;
border-top-left-radius: 25px;
}
/* Wirkt auch an Bildern. Opera, Safari und Chrome haben Probleme in der Kombination von Bilder und Rahmen. */Beispiel Nr. 4 So sieht's aus:
HTML:
<div id="example-5">border-top-left-radius</div>CSS:
#example-5 {
background-color: #C000FF;
padding: 20px;
border-top-left-radius: 25%;
}
/* %-Angaben verhalten sich realiv zur Höhe und Breite und können zu einer elliptischen Darstellunng führen. */Beispiel Nr. 5 So sieht's aus:
border-top-left-radius
HTML:
<div id="example-6">border-top-left-radius</div>CSS:
#example-6 {
background-color: #22BB36;
padding: 20px;
width: 200px;
height: 200px;
border-top-left-radius: 25%;
}
/* Sind Höhe und Breite gleich groß kann ein %-Wert eine saubere Darstellung umsetzen. */Beispiel Nr. 6 So sieht's aus:
border-top-left-radius
HTML:
<div id="example-7">border-top-left-radius</div>CSS:
#example-7 {
background-color: #c00;
padding: 20px;
width: 200px;
height: 200px;
border-top-left-radius: 100px 50px;
}
/* Zwei Werte bewirken eine elliptische Rundung der Ecke. */Beispiel Nr. 7 So sieht's aus:
border-top-left-radius
HTML:
<div id="example-8">
<button>border-top-left-radius</button>
<br /><br />
<input type="text" name="text" value="" />
<br /><br />
<input type="submit" name="senden" value="Senden" />
</div>CSS:
#example-8 input,
#example-8 button {
padding: 20px;
border-top-left-radius: 20px;
}
/* Auch Schaltflächen unterstützen abgerundete Ecken.
Opera stellt dies allerdings nicht dar. */Beispiel Nr. 8 So sieht's aus:
HTML:
<div id="example-9">
<table>
<tr>
<td>border-top-left-radius</td>
<td>border-top-left-radius</td>
</tr>
<tr>
<td>border-top-left-radius</td>
<td>border-top-left-radius</td>
</tr>
</table>
</div>CSS:
#example-9 table {
padding: 10px;
border: 2px solid blue;
border-top-left-radius: 20px;
}
#example-9 td {
padding: 10px;
border: 2px solid red;
border-top-left-radius: 20px;
}
/* Abgerundete Ecken auch an Tabellen und Tabellenzellen. */Beispiel Nr. 9 So sieht's aus:
| border-top-left-radius | border-top-left-radius |
| border-top-left-radius | border-top-left-radius |
HTML:
<div id="example-10">
<table>
<tr>
<td>border-top-left-radius</td>
<td>border-top-left-radius</td>
</tr>
<tr>
<td>border-top-left-radius</td>
<td>border-top-left-radius</td>
</tr>
</table>
</div>CSS:
#example-10 table {
padding: 10px;
border: 2px solid blue;
border-collapse: collapse;
border-top-left-radius: 20px;
}
#example-10 td {
padding: 10px;
border: 2px solid red;
border-top-left-radius: 20px;
}
/* border-collapse: collapse setzt abgerundete Ecken außer Kraft. */Beispiel Nr. 10 So sieht's aus:
| border-top-left-radius | border-top-left-radius |
| border-top-left-radius | border-top-left-radius |
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!