Kurs HTML

Wprowadzenie: Łagodzenie krawędzi

Domyślnie rogi elementów HTML są ostre (kąty proste). Właściwość border-radius pozwala na **zaokrąglenie** tych rogów, nadając elementom bardziej miękki i nowoczesny wygląd.

Zaokrąglenie jest tworzone przez "wycięcie" fragmentu rogu za pomocą ćwiartki okręgu lub elipsy. Właściwość border-radius definiuje promień (lub promienie) tego okręgu/elipsy.

border-radius działa niezależnie od tego, czy element ma widoczne obramowanie (border), czy nie. Zaokrągla zarówno tło (background), jak i obramowanie.

Wartości border-radius

Właściwość border-radius jest shorthandem, który może przyjąć od jednej do czterech wartości, definiujących promienie zaokrąglenia dla poszczególnych rogów:

• Jedna wartość: (np. border-radius: 10px;) - Wszystkie cztery rogi mają ten sam promień zaokrąglenia (10px).
• Dwie wartości: (np. border-radius: 10px 20px;) - Pierwsza wartość dla rogów górnego lewego i dolnego prawego (10px), druga dla rogów górnego prawego i dolnego lewego (20px).
• Trzy wartości: (np. border-radius: 10px 20px 30px;) - Pierwsza dla górnego lewego (10px), druga dla górnego prawego i dolnego lewego (20px), trzecia dla dolnego prawego (30px).
• Cztery wartości: (np. border-radius: 10px 20px 30px 40px;) - Kolejno: górny lewy (10px), górny prawy (20px), dolny prawy (30px), dolny lewy (40px) (zgodnie z ruchem wskazówek zegara).

Wartości mogą być podawane w jednostkach długości (px, em, rem itp.) lub w procentach (%). Wartości procentowe odnoszą się do wymiarów pudełka elementu (padding-box): procentowa wartość poziomego promienia odnosi się do szerokości pudełka, a pionowego do wysokości.

<div class="box radius-example r1">10px</div>
<div class="box radius-example r2">10px 20px</div>
<div class="box radius-example r3">10px 20px 30px</div>
<div class="box radius-example r4">10px 20px 30px 40px</div>
<div class="box radius-example r-percent">50% (Elipsa/Okrąg)</div>Kopiuj

.radius-example {
  width: 120px;
  height: 80px;
  padding: 10px;
  margin: 10px;
  background-color: lightcoral;
  border: 2px solid darkred;
  display: inline-block; /* Aby były obok siebie */
  text-align: center; line-height: 80px; color: white;
}

.r1 { border-radius: 10px; }
.r2 { border-radius: 10px 20px; }
.r3 { border-radius: 10px 20px 30px; }
.r4 { border-radius: 10px 20px 30px 40px; }
.r-percent { 
  border-radius: 50%; /* Tworzy elipsę lub okrąg, jeśli element jest kwadratem */
  width: 100px; height: 100px; line-height: 100px;
}
Kopiuj

Zaokrąglenia eliptyczne (dwie wartości na róg)

Można również zdefiniować różne promienie dla osi poziomej i pionowej dla każdego rogu, tworząc zaokrąglenia eliptyczne. Robi się to, podając dwie wartości oddzielone ukośnikiem (/) w ramach definicji promieni.

border-radius: [promienie poziome] / [promienie pionowe];

Każda część (przed i po ukośniku) może zawierać od jednej do czterech wartości, zgodnie z zasadami opisanymi wcześniej.

• border-radius: 10px / 20px; - Wszystkie rogi mają promień poziomy 10px i pionowy 20px.
• border-radius: 10px 30px / 20px 40px; - Górny lewy i dolny prawy: 10px/20px. Górny prawy i dolny lewy: 30px/40px.
• border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px; - Każdy róg ma inną parę promieni (poziomy/pionowy).

<div class="box radius-example ellipse-radius">10px 30px / 20px 40px</div>Kopiuj

.ellipse-radius {
  border-radius: 10px 30px / 20px 40px;
  background-color: lightseagreen;
  border-color: darkslategray;
}Kopiuj

Ta składnia jest rzadziej używana, ale pozwala na tworzenie bardziej niestandardowych kształtów.

Indywidualne właściwości dla rogów

Istnieją również indywidualne właściwości do ustawiania promieni dla każdego rogu z osobna:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Każda z tych właściwości może przyjąć jedną (promień kołowy) lub dwie wartości (promień poziomy i pionowy dla elipsy), np.:

.individual-radius {
  background-color: gold;
  border: 2px solid darkgoldenrod;
  width: 150px; height: 100px;

  /* Tylko górny lewy róg zaokrąglony kołowo */
  border-top-left-radius: 20px; 

  /* Dolny prawy róg zaokrąglony eliptycznie */
  border-bottom-right-radius: 30px 15px; /* 30px poziomo, 15px pionowo */
}Kopiuj