PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

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.

CSS-Eigenschaft: border-top-left-radius
KurzbeschreibungWerteStandardwertKategorieHinweis
Abgerundete Ecken links oben
  • <length>
  • <percentage>
0
Allgemein:
Rahmen
CSS 3:
Backgrounds and Borders
Neu in CSS 3
 

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.
Browserunterstützung von border-top-left-radius
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

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:



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:

American Football
 

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.143 sec.