CSS-Eigenschaft border-radius

Die Eigenschaft border-radius wird verwendet, um abgerundete Ecken für die äußere Randkante eines Elements herzustellen.

Diese Eigenschaft ist eine Abkürzung für die Eigenschaften border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius, die verwendet werden, um die vier Ecken eines Elements getrennt einzustellen. Mit der Eigenschaft border-radius können jedoch alle vier Ecken gleichzeitig definiert werden. Es kann von einem bis zu vier Werten haben.

Wenn alle vier Werte eingestellt sind, stellen sie die Grenzen oben links, oben rechts, unten rechts und unten links dar. Wenn unten links übersehen wird, ist es dasselbe wie oben rechts, wenn unten rechts weggelassen wird, ist es dasselbe wie oben links, und wenn nur ein Wert definiert ist, wird es für alle vier Ecken gleichermaßen verwendet.

Die Eigenschaft border-radius wird angegeben als::

  1. ein, zwei, drei oder vier Längen- oder Prozentwerte. Hiermit wird ein einzelner Radius für die Ecken eingestellt.
  1. gefolgt von einem Schrägstrich ( / ) und einem, zwei, drei oder vier Längen- oder Prozentwerten. Hiermit wird ein zusätzlicher Radius eingestellt, so dass Sie elliptische Ecken haben können.

Der erste Satz von (1-4) Werten definiert den horizontalen Radius für alle vier Ecken. Ein optionaler zweiter Satz von Werten, dem ein Schrägstrich vorangestellt ist, definiert die vertikalen Radien für alle vier Ecken. Wenn nur ein Satz von Werten geliefert wird, werden diese verwendet, um sowohl die vertikale als auch die horizontale Ebene gleichermaßen zu bestimmen.

Anfangswert 0
Gilt für Alle Elemente. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Ja. Jede der Eigenschaften der Kurzform ist animierbar.
Version CSS3
DOM Syntax object.style.borderRadius = "20px";

Syntax

border-radius: 1-4 length | 1-4 length (%) |  initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      height: 40px;
      width: 50%;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für border-radius</h2>
    <div></div>
  </body>
</html>

Für die bestmögliche Browserunterstützung sollen Sie -moz- für Firefox und -webkit- für Safari, Chrome und andere Browser voranstellen.

Aktuelle Firefox-Versionen unterstützen die Eigenschaft border-radius ohne das Präfix -moz-.

Ein Beispiel mit den Präfixen -moz- und -webkit-, wo zwei Eigenschaften von border-radius: mit percent und pixel verwendet wird.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .radius-pixel {
      height: 40px;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      }
      .radius-percent {
      width: 120px;
      height: 120px;
      margin-top: 20px;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für border-radiusmit -moz- und -webkit-</h2>
    <div class="radius-pixel"></div>
    <div class="radius-percent"></div>
  </body>
</html>

Sie können auch die die Eigenschaft border-radius für ein Element mit background color oder background image einstellen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .radius-bg {
      width: 250px;
      height: 200px;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      }
      .radius-img {
      width: 250px;
      height: 200px;
      margin-top: 20px;
      background-img: lightgray;
      background: url('/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
      background-position: left top;
      background-repeat: repeat;
      border: 2px solid #1c87c9;
      border-radius: 25px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für border-radius mit background color</h2>
    <div class="radius-bg"></div>
    <h2>Ein Beispiel für border-radius mit background image</h2>
    <div class="radius-img"></div>
  </body>
</html>

Ein Beispiel mit verschiedenen Boxen mit unterschiedlichen Werten für border-radius, die die Form der Boxen bilden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      width: 250px;
      height: 150px;
      border: solid 3px #1c87c9;
      background: #1c87c9;
      }
      .radius_1 {
      border-radius: 25px;
      -moz-border-radius: 25px;
      -webkit-border-radius: 25px;
      }
      .radius_2 {
      border-radius: 25% 10%;
      -moz-border-radius:  25% 10%;
      -webkit-border-radius:  25% 10%;
      }
      .radius_3 {
      border-radius: 10% 30% 50% 70%;
      -moz-border-radius: 10% 30% 50% 70%;
      -webkit-border-radius:  10% 30% 50% 70%;
      }
      .radius_4 {
      border-radius: 10% / 50%;
      -moz-border-radius:  10% / 50%;
      -webkit-border-radius: 10% / 50%;
      }
      .radius_5 {
      border-radius: 10px 100px / 120px;
      -moz-border-radius:  10px 100px / 120px;
      -webkit-border-radius:  10px 100px / 120px;
      }
      .radius_6 {
      border-radius: 25% 10%;
      -moz-border-radius:  25% 10%;
      -webkit-border-radius:  25% 10%;
      }
      .radius_7 {
      border-radius: 50% 20% / 10% 40%;
      -moz-border-radius:  50% 20% / 10% 40%;
      -webkit-border-radius:  50% 20% / 10% 40%;
      }
      .radius_8 {
      border-radius: 50%;
      -moz-border-radius:  50%;
      -webkit-border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für border-radius</h2>
    <div class="radius_1"></div>
    <br />
    <div class="radius_2"></div>
    <br />
    <div class="radius_3"></div>
    <br />
    <div class="radius_4"></div>
    <br />
    <div class="radius_5"></div>
    <br />
    <div class="radius_6"></div>
    <br />
    <div class="radius_7"></div>
    <br />
    <div class="radius_8"></div>
  </body>
</html>

Werte

Wert Beschreibung
length Es legt die Rundungsgröße der Ecken fest.
% Es setzt die Rundungsgröße der Ecken in Prozent.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
4+ 3+ 3.1+ 11.5+

Übe dein Wissen

Was ist der CSS-Befehl 'border-radius' in HTML-Programmierung?
Finden Sie das nützlich?