Old and new school technique to CSS sliding door

Once searching a solution for sliding door (headings or links having top corners rounder while bottom ones pointed), realized me that people are still using old school techniques which are time taking and simply old ones, where I'm preferring some change. Lets have look on both possibilities.
While discussing CSS property background property I think a year ago, I mentioned about sliding door. Which was the old technique:

Old School Method [Revising]

This method uses two images, one for left and one for right. These images have top side rounded which makes this effect in action.

This is how sliding door looks like

Pros & Cons

• Height should be fixed.
• Use of images sucks.
• Use of images increases size.
• Its a history now

Do not like history therefore no demo.

New School Method

Using border-radius property you can create this pretty cool effect quiet easily. I found this tool on the web that generates the code for your selected radius, use this you can your sliding door pretty easily.

However, you find some sort of browser opposition here because it is not supported in Opera Mini and IE8, so if you can neglect this drawback you can have it.

Pros & Cons

• Independent of height problem.
• Yet the easiest way to achieve effect.
• No support for IE8 (or below) and Opera Mini (till date).

Demo

See the Pen sliding door Demo by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.