Iekšējais border-radius nav tāds pats kā ārējais

Ja kartītei un tajā ievietotam attēlam uzliek vienādu border-radius, abi stūri nav paralēli. Iekšējā elementa stūris izskatās pārāk apaļš, lai gan CSS vērtības sakrīt.

Ārējais rādiuss mīnus atstarpe

Lai abas līnijas stūrī sekotu viena otrai, iekšējam rādiusam jābūt mazākam. Formula ir vienkārša:

Iekšējais rādiuss = Ārējais rādiuss – Atstarpe (padding)

See the Pen Inner Radius Design Tip with CSS Custom Properties by Jhey (@jh3y) on CodePen.

Piemērs ar 30 un 20 pikseļiem

Ja ārējās kartītes rādiuss ir 30px un atstarpe līdz iekšējam elementam ir 20px, iekšējais rādiuss ir 10px.

Vienāds 30px rādiuss abiem elementiem rada nevienmērīgu atstarpi stūrī. 10px liek līknēm izskatīties saskaņotām.

Lai CSS izrēķina pats

Glabā abas pamatvērtības kā pielāgotos CSS rekvizītus un iekšējo rādiusu aprēķini ar calc():

.areja-kaste {
  --radius: 30px;
  --atstarpe: 20px;

  background-color: #333;
  border-radius: var(--radius);
  padding: var(--atstarpe);
}

.ieksja-kaste {
  border-radius: calc(var(--radius) - var(--atstarpe));

  background-color: #fff;
  height: 100px;
}

Ja atstarpe ir lielāka par ārējo rādiusu, rezultāts vairs nevar būt negatīvs un praktiski jāizmanto 0. Parastai kartītei ar vienādu atstarpi šī formula ir labs sākuma punkts, nevis universāls likums katrai sarežģītai formai.