Rainbow Border with Modern CSS (One Rule)

Minimal, Copy‑Paste CSS

One rule using layered backgrounds and conic-gradient(). The solid face paints the padding box; the rainbow paints the border box through a transparent border.

/* HTML */
<button class="rainbow" type="button">Rainbow Bordered Button</button>

/* CSS */
.rainbow {
  /* rotation angle for the conic gradient */
  --angle: 0turn;
  /* Layout */
  inline-size: 15em;
  block-size: 3em;
  border-radius: 10px;
  border: 4px solid transparent; /* border thickness */

  /* Two backgrounds: inner solid, outer conic rainbow */
  background:
    linear-gradient(hsl(199 61% 17%), hsl(199 61% 17%)) padding-box,
    conic-gradient(from var(--angle),
      hsl(4 82% 66%), hsl(11 86% 66%), hsl(40 90% 68%),
      hsl(161 33% 60%), hsl(208 48% 60%), hsl(283 30% 68%), hsl(4 82% 66%)
    ) border-box;

  color: white;
  font-size: 1.1rem;
}

.rainbow:where(:hover, :focus-visible) {
  background:
    linear-gradient(hsl(199 61% 22%), hsl(199 61% 22%)) padding-box,
    conic-gradient(
      hsl(4 82% 66%), hsl(11 86% 66%), hsl(40 90% 68%),
      hsl(161 33% 60%), hsl(208 48% 60%), hsl(283 30% 68%), hsl(4 82% 66%)
    ) border-box;
}

.rainbow:active {
  background:
    linear-gradient(hsl(199 61% 12%), hsl(199 61% 12%)) padding-box,
    conic-gradient(
      hsl(4 82% 66%), hsl(11 86% 66%), hsl(40 90% 68%),
      hsl(161 33% 60%), hsl(208 48% 60%), hsl(283 30% 68%), hsl(4 82% 66%)
    ) border-box;
}

Benefits:

• No pseudo‑elements
• Border radius applies to both the fill and the rainbow border
• Colors stay crisp on any DPI; no images required

Live Demo

Buttons below use the same minimal CSS. The second one rotates the border.

Notes

• Example only; styles above are scoped to this article.
• Use a real <button> for accessibility; keep contrast high.
• Adjust border thickness by changing the transparent border width.