CSS3 Border Radius Issues

All issues checked again, 6 May, 2013. Nobody improved.

All issues checked again, 10 May, 2016. You judge.

All issues checked again, 11 January, 2018. Take a bow, Redmond.

I love border radii in CSS3. (I hate playing with eScissors to get round corners from a PSD. Kindergarten work.)

So I started a little page to see if I could do something like the Nike "swoosh" using CSS3 border radii. What I learned was that this is still a fragile feature. In fact, MSIE, which was last to the party for CSS3 round corners, is the only vendor who gets even a passing grade. (Full disclosure: I am no fan of MSIE but I believe in giving credit when it's due.)

Here I'll show screen shots, so we can discuss all browsers (current as of the first day of fall, 2012). Before the end I'll show you the code so you can do your own thing.

The Benchmark: MSIE

The code uses a default 1 pixel, green border. (I use a border: '1px solid green' during development. Very handy as it never conflicts with the actual design.). On top and right it uses a fat ridge border with radius corners. MSIE has the basic idea:

Border radius example, MSIE 9. Border radius example, MSIE 11.

Second image: 10 May 2016 (MSIE 9).

Third image: 11 January 2018 (MSIE 11).

Grade: A

2018: As a practicing frontend engineer I've given up testing MSIE. I'm too old. But this time they got it right. Amazing.

2016: Mostly correct. I don't like the light diagonal (pointed out by the arrow) but that's a picky complaint. The color choice is the specified color (blue on top) on the light side of the ridge, black (top) or dark gray (side) on the shaded side. An arguably correct approach.

The specified color, right border is the same as the background color of the backing div. The idea, successful here, was to make it disappear.

Not the Benchmark: Opera (Now Chrome and Vivaldi, Too)

Opera is usually my benchmark browser. Opera and Vivaldi share the Chrome engine. Too bad Google's sadly lagging behind Microsoft. Never thought I'd say that.

Border radius example, Opera.

Second image: 10 May 2016.

Third image: 11 January, 2018

Grade: D

How does this get past Quality Assurance? First, the top border doesn't meet the right border, top corner. Second, there's a mystery slice of pie where the top meets the right. Even more surprising, the single pixel green default at the bottom left falls apart. And it fails again on the bottom right. "All a friend can say is , 'Ain't it a shame.'"

Not Debugged: Firefox

Five years and nothing's fixed. Your favorite browser? Sorry.

Border radius example, Firefox.

Second image: 10 May 2016.

Thkird image: 11 January, 2018

Grade: F

Quality Assurance? Firefox is a non-profit, but its budget is three times Opera's gross revenue. Look at those rectangles. The light side of the right border chooses to be a rectangle. Worse, another rectangle with no raison d'être lives where Opera left its piece of pie. What can you say? At least they drew the single-pixel default border correctly.

Rock Bottom: Google Chrome

See Opera for 2018 update.

Webkit to the rescue? Not even close.

Border radius example, Chrome.

Second image: 10 May 2016. Note: identical result in Opera and Vivaldi. Grade should probably be increased to F. The bottom border is fixed. That's still blue? Still a corner?

Grade: F-

In letter grades, "F" is generally the lowest. Too bad. Google's effort is substantially worse than Opera or Firefox. No arrows for the huge problems in the top border. It's so bad that we use an arrow to draw your attention to the bottom border, which has gone AWOL. Reminder: the top border is a blue ridge. Blue.

We also tried Safari PC (like Chrome, based on Webkit). It is marginally better than Chrome. But only marginally. These bugs are Webkit bugs, too.

Vivaldi

Same (Google) engine as Opera. See Opera, above.

Summary

We really look forward to using CSS3's border radii. They could be good for so much more than just round corners. They could, but as of yet, they aren't ready for production use. Oh well. At least we don't have to play cut and paste just to get round corners.

DIY Testing

<!doctype html>

<!-- artists/closet/bordrad-painting.html
Copyright 2012, Martin Rinehart -->

<html><head><title>Border Radius Painting</title>

    <style>

</style></head><body>

<h1>Border Radius Painting</h1>

    <script>

"use strict";

function create_div( styles, parent ) {
    var div = document.createElement( 'div' );
    style( div, styles );
    if ( parent === undefined ) { parent = document.body; }
    parent.appendChild( div );
    return div;
}

function style( elem, styles ) {
        for ( var prop in styles ) { elem.style[ prop ] = styles[ prop ]; } }

var COLOR_background = '#f8f4f0';
var scale = 0.70;

var bgstyles = {
    background:  COLOR_background,
    border:      '3px solid #e0d8d0',
    height:      scale * 300 + 'px',
    left:        scale * 100 + 'px',
    position:    'absolute',
    top:         scale * 100 + 'px',
    width:       scale * 450 + 'px'
};

var topstyles = {
    background:   COLOR_background,
    border:       '1px solid green',
    borderTop:    ( scale * 50 ) + 'px ridge blue',
    borderRight:  ( scale * 120 ) + 'px ridge ' + COLOR_background,
    borderRadius: ( scale * 400 ) + 'px ' + ( scale * 40 ) + 'px 0 0/' +
            ( scale * 120 ) + 'px ' + ( scale * 20 ) + 'px 0 0',
    height:       ( scale * 150 ) + 'px',
    left:         ( scale * 20 ) + 'px',
    position:     'absolute',
    top:          ( scale * 50 ) + 'px',
    width:        ( scale * 250 ) + 'px'
}

var bg = create_div( bgstyles );

var top = create_div( topstyles, bg );

</script></body></html>

<!-- end bordrad-painting.html -->

Feedback: MartinRinehart at gmail dot com

# # #