Funky CSS Border Utilities

Jan 30 2018
TL;DR

If you need a quick way to apply some funky CSS border radiuses, I've built a script to generate a set of utility classes to make it easier.

As part of some prototyping in the next version of the e-commerce platform app I’m building, I wanted to experiment with the idea of simulating “hand-drawn” borders for certain elements using CSS. I’ve been using Tailwind CSS for a majority of the front-end work, but it doesn’t come with utility classes for adjusting the border-radius values for both the horizontal and vertical axes separately. So I whipped up a little Ruby script to generate some utility classes that still have the same Tailwind naming flavor.

Some Examples

.rounded-tl-sm-lg
.rounded-br-xl-md
.rounded-tr-md-xl
.rounded-bl-lg-md
.rounded-tl-xl-lg
.rounded-tr-sm-md
.rounded-bl-md-sm
.rounded-br-xl-xl

PostCSS and cssnext

Since I’m using this in an existing Webpack and PostCSS pipeline in my Rails app, this particular script generates CSS in the form of cssnext so that I can take advantage of custom properties and var.

Configuration

The border radius values are driven by a set of custom properties with a default configuration, though they can be customized to whatever you want.

:root {
  --h-xl-size: 155px;
  --v-xl-size: 155px;
  --h-lg-size: 100px;
  --v-lg-size: 100px;
  --h-md-size: 55px;
  --v-md-size: 55px;
  --h-sm-size: 35px;
  --v-sm-size: 35px;
}

Class Naming

The structure of the CSS class names used here are broken down like this:

rounded-{corner}-{horizontal_size}-{vertical_size}

So applying a class of rounded-tl-sm-md using the default configuration from above would generate the following CSS declarations:

.rounded-tl-sm-md {
  border-top-left-radius: 35px 55px;
}

Source Code

I’ve pushed up the Ruby script along with a CSS file that was generated using that script. It also includes an HTML file to see examples of lots of different sizes of various border radiuses.

Funky CSS Border Utilities

What’s Next?

Here are a couple ideas I have for enhancements to make next after using these utility classes myself for a little while.

More Granular Scale?

I’m thinking it might be better to use a numeric scale, rather than a sm, md, etc one. So doing something like rounded-tl-2-4 might make more sense to allow you to really get creative with different sizes of each corner instead of getting stuck with just 4 or so sizes.

PostCSS Plugin

It’d also be great to turn this into an actual PostCSS plugin so that it can be put directly into a Webpack/PostCSS pipeline right along side other plugins like Tailwind. I just created it in Ruby originally because I’m much more familiar with that than the PostCSS plugin infrastructure.

Thoughts?

I’m really curious to know what you think about all of this. Hit me up on twitter and let me know!

Want More Helpful Tips?

Tips on coding, design and running a software business

Questions/Comments?

Hit me up on twitter @joeybeninghove