Radius

Corner rounding.

html

<div class="rd-wrap">
  <div class="rd-box" style="width:100px;height:100px;background:#A8E6C1;border-radius:20px;"></div>
  <p class="rd-caption">border-radius: 20px</p>
</div>
<style>
.rd-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 260px; }
.rd-box { box-sizing: border-box; }
.rd-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[260px]">
  <div class="box-border" style="width:100px;height:100px;background:#A8E6C1;border-radius:20px;"></div>
  <p class="mt-3 text-xs text-[#241430]/80">border-radius: 20px</p>
</div>

react

export function Radius({
  radius = 20,
  topOnly = false,
  background = "#A8E6C1",
  size = 100,
}) {
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 260 }}>
      <div style={{ width: size, height: size, background, boxSizing: "border-box",
        borderRadius: topOnly ? `${radius}px ${radius}px 0 0` : radius }} />
      <p style={{ marginTop: 12, fontSize: 12, color: "#241430cc" }}>border-radius: {radius}px{topOnly ? " (top corners only)" : ""}</p>
    </div>
  );
}