From Box Shadows to Dashed Borders: How I Hit 63 Characters on CSSBattle's Daily Target 🎯

Source: Dev.to

The Journey to 63 Characters

Let me walk you through how my solution evolved — because the process is the interesting part.

Attempt 1 — The Brute Force (box‑shadow era)

*{
  background:#FFF;
  *{
    border:70px solid#328FC1;
    margin:70;
    color:323138;
    box-shadow:190px 110px,-190px 110px,190px -110px,-190px -110px
  }
}

I was thinking: four squares, four box‑shadow offsets. It worked visually but the character count was rough. Box shadows for positional tricks are a classic CSSBattle technique — but not the right tool here.

Attempt 2 — Switching to Dashed Border

Then it hit me. The target had a dashed border pattern. What if I just… used dashed?

*{
  background:#FFF;
  *{
    border:70px dashed#328FC1;
    margin:0;
  }
}
&{
  border:70px dashed#323138;
}

The outer element gets one color, the inner gets another. Fewer lines, cleaner logic.

Attempt 3 — Collapsing Both Into One Rule

What if both borders share the same properties and I handle colors differently?

*{
  background:#FFF;
  color:323138;
  border:75q dashed;
  *{
    color:328FC1;
    margin:0;
  }
}

Getting shorter. color instead of explicit border-color. 75q instead of 70px (CSS q units are quarter‑millimeters — smaller to type, can achieve similar visual results with the right value). The background white was still there though.

Attempt 4 — The “Wait, Do I Even Need That?” Moment

*{
  color:323138;
  border:75q dashed;
  *{
    color:328FC1;
    margin:0
  }
}

63 characters. Score: 819.42.
The background:#FFF was completely unnecessary. The default background was already white. I’d been carrying dead weight the entire time.

That moment of reviewing and asking “does this line actually do anything?” — that’s where the real characters were hiding.

What I Actually Learned

1. The technique you reach for first is rarely the most efficient.
   I started with box‑shadows because that’s what I knew. Dashed borders were the right tool, and I only found them by staying curious.

2. Every property you add is a character cost. Question everything.
   background:#FFF felt safe and explicit, but it wasn’t needed. The discipline of asking “is this line earning its place?” applies beyond CSSBattle too.

3. q units exist and they are criminally underused.
   CSS has quarter‑millimeter units. I love this language.

4. Daily practice compounds quietly.
   I didn’t solve this in one sitting. I built up pattern recognition over many days of attempts, many top solutions I barely understood, many “oh that’s clever” moments that slowly sank in.

5. Small achievements are worth celebrating.
   When the character count hit 80, I was happy. Dropping to 63 made me very happy. Neither are world records, but they felt earned.

Should You Try CSSBattle?

If you write CSS at all — yes. It will:

• Force you to learn obscure but real CSS properties
• Make you think about why properties work, not just what they do
• Introduce you to units, tricks, and shorthands you’d never encounter in normal work
• Give you a tiny dopamine hit when the character count drops by 2

You’ll also check the top solutions and feel humbled. That’s fine; that’s the point. Understanding 20 % of what the #1 solution is doing still teaches you something.

Final Thought

I never thought I’d get a double‑digit character count on a daily target. For a long time I was happy just getting close to the target image, then happy getting on the board, then happy breaking 100 characters, then 80, then 63.

The leaderboard always has someone smarter. Their solutions will still teach me something tomorrow.

But today, 63 characters felt like a lot.

Have you played CSSBattle? What’s your favorite CSS trick you learned from it? Drop a comment — I genuinely want to know.