Jithesh
Back to Blog

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

4 min read

Score: 819.42 | Characters: 63 | Platform: CSSBattle

I want to talk about a small win. Not a viral project, not a shipped product, not a promotion. Just 63 characters of CSS that made me genuinely happy.

If you've never heard of CSSBattle, the idea is simple and slightly addictive: recreate a target image using the smallest amount of CSS you can write. Every character counts — literally. Your score goes up as your character count goes down.

I've been doing the daily targets consistently. Not always solving them. Not always topping the leaderboard. But showing up, trying, checking yesterday's top solutions (often not fully understanding them), and slowly getting better.

Today was different.

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

Wait — 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 or one day. 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. When I realized I could remove the background and drop to 63, I was very happy. Neither of these are world records. I don't care. It 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? Find me on dev.to or LinkedIn — I genuinely want to know.

View All Posts