Zaobljeni vogali so danes skoraj standardni del spletnega oblikovanja. Kartice, slike, vsebinski bloki in drugi elementi imajo pogosto border-radius, dokler niso prikazani čez celotno širino zaslona. Takrat zaobljeni vogali pogosto niso več smiselni, zato želimo vogale preprosto odstraniti.

Klasična rešitev bi bila uporaba media queryja. Obstaja pa tudi nekaj bolj zanimivih CSS pristopov, kjer lahko border-radius prilagodimo glede na dejansko širino elementa. “Border-radius” lahko prilagajamo z media queryji, container queryji ali CSS matematičnimi funkcijami. Zanimiv pristop uporablja clamp() in container query enote, s katerimi lahko CSS samodejno odstrani zaobljene vogale, ko element doseže polno širino svojega vsebnika.

Klasična rešitev: media query

Najpreprostejša rešitev je seveda media query. Težava je v tem, da spremljamo širino zaslona, ne dejanske širine elementa. Včasih se lahko kartica razteza čez celotno širino že pri večjem zaslonu, drugič pa ima tudi na manjšem zaslonu še vedno robove. Zato media query ni vedno najbolj natančna rešitev.

.card {
border-radius: 1rem;
}

@media (max-width: 700px) {
.card {
border-radius: 0;
}
}

Druga možnost: container queries

Bolj sodoben pristop so container queries, kjer lahko odzivnost določimo glede na širino vsebnika/elementa. To je že precej bolj prilagodljivo, vendar še vedno določamo konkretno mejno vrednost.

.wrapper {
container-type: inline-size;
}

.card {
border-radius: 1rem;
}

@container (max-width: 700px) {
.card {
border-radius: 0;
}
}

Rešitev: clamp() in container query enote

Za ta članek mi je najbolj všeč naslednja rešitev, ki jo je razvil Ahmad Shadeed, kjer CSS z matematičnimi funkcijami ustvari nekakšen pogoj “if/else”. Osnovna logika je približno takšna: če element uporablja celotno širino  je border-radius: 0 drugače border-radius: 1rem.

border-radius: clamp(0px, (100cqi - 100%) * 9999, 1rem);

Na prvi pogled je videti precej nenavadno. V resnici pa se v njej skriva preprosta logika. Najprej moramo elementu določiti container:

.wrapper {
container-type: inline-size;
}

Nato lahko znotraj njegovega otroka uporabimo:
.card {
border-radius: clamp(
0px,
(100cqi - 100%) * 9999,
1rem
);
}

Dokler ima .card okoli sebe prostor, ostanejo vogali zaobljeni. Ko pa se kartica raztegne do celotne širine vsebnika, CSS samodejno odstrani border-radius. Brez dodatnega media queryja.

Včasih CSS omogoča precej več, kot bi pričakovali na prvi pogled. “Media queryji” so še vedno odlična rešitev, “container queryji” pa nam omogočajo, da odzivnost prilagodimo dejanski velikosti komponente. S kombinacijo clamp(), cqi enot in malo CSS matematike lahko naredimo še korak dlje in border-radius praktično vključimo ali izključimo glede na širino elementa. Priznam, da “border-radius: clamp(0px, (100cqi – 100%) * 9999, 1rem);” ni najbolj samoumeven CSS. Je pa lep primer, kako lahko sodobni CSS v določenih primerih nadomesti logiko, za katero bi nekoč uporabili JavaScript ali dodatne “media queryje”.

Vir in inspiracija: Conditional Border Radius In CSS – Ahmad Shadeed