Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

avoid -webkit-border-radius shorthand optimization

See original GitHub issue

Given this input:

.borderTLBR5 { border-radius: 5px 0 5px 0; -moz-border-radius: 5px 0 5px 0; -webkit-border-radius: 5px 0 5px 0; -ms-border-radius: 5px 0 5px 0; -khtml-border-radius: 5px 0 5px 0; }

cleanCSS with no options specified generates:

.borderTLBR5{border-radius:5px 0;-moz-border-radius:5px 0;-webkit-border-radius:5px 0;-ms-border-radius:5px 0 5px 0;-khtml-border-radius:5px 0 5px 0}

While, in Chrome (55.0.2883.95), Opera(42.0.2393.94) and Safari(9.1.2) in a Mac OS X 10.11.6 64-bit, the syntax:

-webkit-border-radius:5px 0 instead of: -webkit-border-radius:5px 0 5px 0 breaks the styling and the borders don’t get rendered at all.

The cleanCSS version used is 3.4.23. I got the same behavior both invoking cleancss from terminal or through gulpwith gulp-cleancss.

Issue Analytics

State:
Created 7 years ago
Comments:5

Top GitHub Comments

1reaction

jakubpawlowiczcommented, Jan 20, 2017

Fixed in 3.4.24 by ignoring any -webkit-border-radius optimizations. I realized it’s a more complex case when you factor in longhand properties, like -webkit-border-top-left-radius…

0reactions

jakubpawlowiczcommented, Jan 16, 2017

Looks like any -webkit-border-radius value which is not:

a single value, e.g. -webkit-border-radius: 5px
a set of four values, e.g. -webkit-border-radius: 5px 4px 3px 2px
a horizontal and vertical split, e.g. -webkit-border-radius: 1px / 5px (both values can be any combination of above)

behaves differently than unprefixed version. I have a fix to completely ignore -webkit-border-radius but I wonder if it’s worth to apply these special rules and keep optimizing it.

Top Results From Across the Web

border-radius - CSS-Tricks

border -radius is what we call a “shorthand” property. That means it sets the following individual properties in a single declaration: border-top ...

CSS { In Real Life } | Logical Border Radius

So how about using the shorthand for unequal radii? Setting all of our radii to different values can result in uneven, organic-looking shapes....

A quick note on border radius - CSS Wizardry

This is a quick post concerning the border-radius CSS3 property, ... Wrong, you can actually use the border-radius shorthand to nail this in ......

border-radius - CSS: Cascading Style Sheets - MDN Web Docs

The border-radius CSS property rounds the corners of an element's outer ... This property is a shorthand for the following CSS properties:.

CSS border-radius property - W3Schools

The border-radius property defines the radius of the element's corners. Tip: This property allows you to add rounded corners to elements! This property...