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.
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.