A little story about border radius

Alright, this will be fun, back in 2007 when I started learning how to code and design websites there was no such thing as border-radius.

Nowadays it's pretty easy to create a rounded button:

<button style="background: #6127ff; color: white; border-radius: 8px; text-align: center; padding: 10px 20px;">
  Buy now!
</button>

This code will create something like this:

This is pretty easy and straight forward nowadays, back in 2007, how would someone create a rounded button if there was no border-radius?

We had to actually use images, that's right, images. Lets brake it down and see the tricks we used back in the day.

Left, middle and right

To create a rounded button we will need 3 images, one for the left rounded side, one for the middle and another for the right rounded side.

Here's an illustration of what I'm talking about:

There you go, 3 images. Now how could we apply this in a button? First of all we need at least 3 elements:

<!-- Container for our left rounded image -->
<div class="left"></div>

<!-- Container for our middle image + button -->
<div class="middle"></div>

<!-- Container for our right rounded image -->
<div class="right"></div>

Now we would need to apply CSS to it, mostly to render the background and sizes as well:

.left {
  width: 70px;
  height: 120px;
  background: url('/left.png') center no-repeat;
}

.middle {
  width: 100%;
  height: 120px;
  /* The trick here is to tell our background image to repeat-x */
  background: url('/middle.png') center repeat-x;
}

.right {
  width: 70px;
  height: 120px;
  background: url('/right.png') center no-repeat;
}

All this crap just to have a rounded button, but back in the day it was definitely the easiest and better solution.

Today we only do:

button {
  border-radius: 8px;
}

Crazy how things have evolved.