No Cutting Corners Cutting Corners
Tags: css, webdev, story, overkill
Published: 2018-11-25 04:56:58

---
title: No Cutting Corners Cutting Corners
published: true
description: A nearly tragic tale of the world's most absurd border-radius (except your table-based border, you absolute fossil).
cover_image: https://thepracticaldev.s3.amazonaws.com/i/8rt8lrapdjdgywllfc7j.jpeg
tags: css, webdev, story, overkill
---

One of the most difficult aspects of programming is predicting how long a particular task will take. Sometimes, something that you think will take weeks takes hours instead:

{% twitter 1062742360382230531 %}

But sometimes... Oh, sometimes, estimations can take a far, far darker turn. This is that tale of woe.

## The Problem
In the process of putting together a [particular "secret" project](https://dev.to/pulljosh/how-do-you-learn-best-3he8) of mine, I found myself creating a CodeMirror theme. For those who don't know, [CodeMirror](https://codemirror.net/) is a Javascript library for creating code inputs on the web. It is incredibly well put-together, and is used by Github, Codepen, Glitch, and [many more](https://codemirror.net/doc/realworld.html).

After spending a *little* too long finding some nice text colors (estimations are hard), I moved on to styling text selection. By default, the text selection styles are... fine. It's very boxy, though, and hardly elegant.

If there's anything I've learned as a developer doing design, it's that adding a little border radius can improve just about any rectangle. So, like the good, detail-oriented designer that I am, I set out to achieve a ludicrously simple goal: **Add a small border-radius to the text selection in CodeMirror.**

After years of rounding out rectangles, I knew that this was an easy task. 30 seconds. Tops. [^1]

## The Solution

```css
/* This code is infallible. */
.CodeMirror-selected {
  border-radius: 3px;
}
```

I wrote the code, smashed ctrl-s with a deeply satisfying mechanical click, watched webpack compile (*frontend is crazy, eh?*), and waited for some hot-reloaded perfection.

![This radius isn't quite right.](https://thepracticaldev.s3.amazonaws.com/i/nfr7vamz0acp33ea0to4.png)


Oops. If you don't see it, allow me to make it clear:

![The most upsetting border radius on the face of the earth.](https://thepracticaldev.s3.amazonaws.com/i/zh6wq37wtflvctjdv5mu.png)

Look at it! ***Oh, horror of horrors!*** This selection isn't just one rectangle... It's *three*!

I wasn't about to stand for such an abomination of a radius, so I set out to find a solution.

## The Solution
After a few minutes, it became clear that this problem wasn't so hard after all. There are three separate rectangles, so there can be three separate sets of styles.

For the first rectangle, the top corners get a radius but the bottom ones don't:
```css
.CodeMirror-selected:nth-of-type(1) {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
```

Then comes the middle rectangle. It turns out that in the markup, the middle one is third, so it will be `:nth-of-type(3)`:
```css
.CodeMirror-selected:nth-of-type(3) {
  border-top-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
```

And now the bottom rectangle, which should be rounded at the bottom corners:
```css
.CodeMirror-selected:nth-of-type(2) {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
```

And, lo and behold, it's perfect!

![Look at that beauty.](https://thepracticaldev.s3.amazonaws.com/i/irnedoveue3b4o4d40zk.png)

... Just kidding.

![](https://thepracticaldev.s3.amazonaws.com/i/vrmvz05oudg33xl4s1eh.png)

This one doesn't work if you make a selection of any other shape, and there's no way to detect the shape of the selection, so we're back to square one.

But I wasn't about to give up! I don't (properly) cut corners, after all.

## The Solution

The main problem was that my solutions hadn't been very-context aware. I was blindly applying border-radii[^2], when what I really wanted was an adaptive set of rectangles which could meld into each other in a smooth way.

As a 17 year old acne attack, I've seen enough to have some pretty sage programming wisdom. Here's one piece of bug-fixing advice that has always been obvious in hindsight: **Write code that describes the thing you want to do.**

It's tempting to write code which is tangential to your goal; code which achieves the purposes as a side-effect of what is written. But clean code is clear and direct.

So what's the direct solution here? Well, rather than setting individual border-radii, it would be best to write some CSS which says directly, "Make the boxes gel to each other."

And you know what's wild? [That solution exists.](https://css-tricks.com/gooey-effect/)

If we add an SVG filter definition to the page:

```xml
<!-- https://css-tricks.com/gooey-effect/ -->
<svg style="display: none;">
  <defs>
    <filter id="selection-goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
      <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
    </filter>
  </defs>
</svg>
```

We can use it (with `filter: url(#selection-goo)`) on the parent of the selection `div`s, and it will cause the three separate boxes to be drawn to each other in just the way we want:

![Finally, a working solution! For real this time.](https://thepracticaldev.s3.amazonaws.com/i/786vdczxg7rtjwlqlv78.png)

Check it out! Even with multiple selections, it works beautifully. It also does a little inverse `border-radius` effect for us at the interior corners, which looks pretty neat! (Both nice side effects of writing code that states what we want to achieve -- gooey boxes -- rather than tangential details about how to achieve it.)

## The Conclusion
We have a solution. It works. For real. No gotchas. No cut corners (except the ones we want). There's probably a life lesson to be learned, although I'm not sure exactly what it is.

Is this solution a good idea? Absolutely not. It's a startlingly inefficient solution to a problem that didn't need to be solved. Applying the CSS filter takes up a pretty solid chunk of CPU (GPU?) time that could be spent on better things.

Am I going to use it anyway? Of course! I'm a web developer, and it's 2018! [^3]

[^1]: My sincerest condolences to any who lived through the html tables epoch and used images to create a border (*bored-er*?). Also, you're old now.

[^2]: No matter which plural I choose for "radius", 100% of the comments will be upset. The internet's pedantry knows no bounds.

[^3]: Please send help.