This is just a quick little Ruby script to generate CSS utility classes for doing some funky things with border radiuses. It came about when I was playing around with hand-drawn type borders in CSS.
The CSS utility class names are inspired by Tailwind CSS and I hope to build an actual PostCSS plugin for it at some point.
I've included the generated CSS and a sample HTML file of its use in this repository, but if you run the Ruby script they will get overwritten with what you're generating.
This script generates CSS in the form of cssnext, so it uses custom properties and var calls. The reason for this is because I built it to plug into my Webpack pipeline which already uses PostCSS and cssnext to compile all of the CSS along with my Tailwind styles.
The class names that are generated follow the Tailwind convention for border
radiuses, but they add a h
and
v
dimension to them (horizontal and vertical, respectively).
Styling the top left border radius, you would use a class like .rounded-tl-sm-lg
.
That would apply a sm
border radius to the horizontal axis of that corner
and a lg
border radius to the vertical axis.
You can apply one or more of these utility classes to any element.
For example:
<div class="rounded-tl-sm-lg rounded-br-xl-sm">
</div>
This would add a border radius to the "top left" corner with a sm
radius to its
horizontal axis and an lg
radius to the vertical axis. At the same time
it would also add a border radius to the "bottom right" corner with an xl
radius to its horizontal axis and a sm
radius to the vertical axis.
The script has a default config for the various border radius sizes, but these 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;
}
This is just a one-off script right now, but if you have any questions, you can reach me on my site or @joeybeninghove.