## Borders (aka Grenze... Danke Google)

Wir reden hier eigentlich über die Umrahmung von Elementen, entsprechend im Englischen: "Border"

Border benötigen 3 Definitionen:

- Der Stil (style): einfach, doppelt, gestrichelt, etc.
- Die Breite (width)
- Die Farbe (color)

Ein einfaches Beispiel

          .with-border {
            border: 5px solid black;
          }

Ich bin ein Paragraph!

Natürlich lässt sich alles einzeln definieren

          .border-single-def {
            border-color: crimson;
            border-width: 2rem;
            border-style: ridge;
          }

Rote Farbe,
Dickerer Rand,
"Ridge"

Weitere Stile

style: `double`

style: `dashed`

style: `dotted`

style: `inset`

style: `outset`

### Einzelne Abschnitte mit Border versehen

Es lassen sich auch einzelne, bzw gegenüber liegende Seiten mit einer Border stylen

Die Bereiche:

"block-start"
"inline-start"
Der Inhalt
"inline-end"
"block-end"

"Altgediente" CSS-Profis würden nun aber sagen: "Das sind `top`, `right`, `bottom` und `left`! "

Das stimmt so auch, es gibt die <border>border</border>-Definitionen mit den 4 Richtungen.

Diese Schreibweise ist älter. Die gerade vorgstellten Konzepte sind neuer und beachten die Richtung des Schrift-flusses (mehr dazu später)

Für uns gilt erstmal:
`block` definiert die Vertikale Achse
`inline` definiert die Horizontale Achse

`start` sowie `end` definieren jeweils den Anfang und das Ende der Achse!

Entsprechend können wir nun den oberen und rechten Border separat stylen:

          .seperated-border-style {
            border-block-start: 0.5rem double blueviolet;
            border-inline-end: 0.5rem dashed olivedrab;
          }

Hier könnte dein Content stehen!

### Abgerundete Borders

Natürlich gibt es einen einfachen weg die Ecken in einer Border abzurunden!

          .rounded-corners {
            border: 3px solid darkblue;
            border-radius: 1rem;
          }

Abgerundete Ecken sind schon nice...

Prozentangaben gehen natürlich auch, sieht aber in einem nicht-quadratischen Block weniger toll aus:

          .fifty-percent-corners {
            border: 3px solid darkblue;
            border-radius: 50%;
          }

Sieht nicht mehr ganz so nice aus...

Es lässt sich auch jede Ecke einzeln mit einem eigenen Radius versehen:

          .cornered-corners {
            border: 3px solid darkblue;
            border-radius: 0 0.5rem 1rem 2rem;
          }

Schon wieder etwas besser...

Selbstredend, hatte jede Ecke auch ihren eigenen (modernen) Namen

`border-<block>-<inline>-radius`

- border-start-start-radius -> oben links
- border-start-end-radius -> oben rechts
- border-end-start-radius -> unten links
- border-end-start-radius -> unten rechts

Das ganze nochmal visualisiert:

start-start
start-end
Der Inhalt
end-start
end-end