Border

Edge around an element.

html

<div class="bd-wrap">
  <div class="bd-box" style="border-width:3px;border-style:solid;border-radius:10px;border-color:#241430;">box</div>
  <p class="bd-caption">border: 3px solid #241430 &middot; radius 10px</p>
</div>
<style>
.bd-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 260px; }
.bd-box { background: #FAF7F2; padding: 24px; text-align: center; font-weight: 700; box-sizing: border-box; }
.bd-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[260px]">
  <div class="bg-[#FAF7F2] p-6 text-center font-bold box-border" style="border-width:3px;border-style:solid;border-radius:10px;border-color:#241430;">box</div>
  <p class="mt-3 text-xs text-[#241430]/80">border: 3px solid #241430 &middot; radius 10px</p>
</div>

react

export function Border({
  width = 3,
  style = "solid",
  radius = 10,
  color = "#241430",
}) {
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 260 }}>
      <div style={{ background: "#FAF7F2", padding: 24, textAlign: "center", fontWeight: 700, boxSizing: "border-box",
        borderWidth: width, borderStyle: style, borderRadius: radius, borderColor: color }}>
        box
      </div>
      <p style={{ marginTop: 12, fontSize: 12, color: "#241430cc" }}>border: {width}px {style} {color} &middot; radius {radius}px</p>
    </div>
  );
}