How we did rounded borders back in day?

border-radius: 16px;

Wow! What a breeze!

Just look at it again!

border-radius: 16px;

Wow!

It's been around for at least a decade! Maybe more than 15 years!

I think today they most annoying browser engine that I use daily is Firefox. It has it's little quirks and incompatibilities. It's good. It's still good. I do not hate every single person that uses Firefox based browsers. I do not hate the fact that I need to support Firefox.

There was a time when Internet Explorer 6 existed. It was a thing. We hated it.

I do not remember all of the hackity hacks that we in order to make IE6 work. I remember there was a way to break CSS parser in IE6, so it ignores the styles for all other browsers and applies alternative styles for IE6 only.

Back in a day – I remember – if you could do a block with rounded corners that was "responsive" you cold call yourself a webmaster. Read a Sr. PhD Mega Engineering Mafia Boss lvl. 99.

We used to draw an image of the block that we wanted with the background that we wanted and we sliced that image. We'd have a separate image for top-left corner, separate image for top-right corner, et cetera. Potentially we would even have a slice for a top border itself.

And we would make a table. With 9 cells. Where your content goes in the middle.

<table>
  <tr>
    <td><img src="/path-to-top-left-image.jpg" /></td>
    <td><img src="/path-to-top-border-image.jpg" /></td>
    <td><img src="/path-to-top-right-image.jpg" /></td>
  </tr>

  <tr>
    <td><img src="/path-to-right-border-image.jpg" /></td>
    <td>Your content goes here!</td>
    <td><img src="/path-to-left-border-image.jpg" /></td>
  </tr>

  <tr>
    <td><img src="/path-to-bottom-left-image.jpg" /></td>
    <td><img src="/path-to-bottom-border-image.jpg" /></td>
    <td><img src="/path-to-bottom-right-image.jpg" /></td>
  </tr>
</table>

I remember seeing border-radius for the first time. It felt like a serious technology progress! Like as if someone just invented cold fusion reactor.

I remember there were also jQuery plugins that could do rounded borders. It would look similar to

$('.rounded-block').rounded(16);

But, those plugins were CPU heavy.