2

I have a problem. I defined in my css

-webkit-border-radius: 5px;

But it doesn't works on IE. When I replaced by

border-radius: 5px

It works. But I don't understand difference between both...

Someone can explain me please?

bdukes
  • 152,002
  • 23
  • 148
  • 175
MathAng
  • 222
  • 1
  • 15

3 Answers3

6

-webkit is a vendor prefix, which has historically been used by browser vendors to provide access to experimental or incomplete APIs. Before border-radius was standardized, it was available in certain browsers (e.g. Safari, which uses the WebKit engine) via a vendor prefix.

Now that the standardized border-radius property is widely supported, the vendor prefix is no longer necessary (unless you're targeting older browsers, such as Safari 4).

Because of Safari's early prominence in many APIs, non-WebKit browsers started supporting some -webkit prefixed APIs (because, as in this case, the prefixed version was used without the standard version). Because of these kinds of compatibility issues, browser vendors have moved away from using vendor prefixes, and rely primarily on experimental flags when developing features.

bdukes
  • 152,002
  • 23
  • 148
  • 175
  • Ok thanks a lot! If I understand I can replace all my webkit-radius-border by radius-border and it will work on all browser ( but not in old versions). What is better solution? Set webkit-radius-border AND radius-border properties or only radius-border? – MathAng Sep 23 '20 at 21:06
  • Unless you're supporting _really_ old browsers, you don't need to worry about continuing to include `-webkit-border-radius`, and can just use `border-radius`. According to https://caniuse.com/border-radius, browsers requiring the prefix include Firefox 3 (with 0.02% global usage), and Safari 4 (with 0.01% global usage). There are certainly newer CSS properties that may require a prefix depending on which browsers you target. – bdukes Sep 24 '20 at 19:44
1

It is a vendor prefix for Webkit based browsers like Safari and Chrome. When a new feature gets implemented by browsers they use these prefixes so users can already implement the features and when different browsers implement the feature differently, it won't matter because the final version of border-radius gets used by all the major browsers. The border-radius version is the one that's supported by all the browsers these days.

See the compatible browsers here

Douwe de Haan
  • 6,247
  • 1
  • 30
  • 45
1

Applications based on WebKit or Blink, such as Safari and Chrome, support a number of special WebKit extensions to CSS. Read more here

Ricardo Sanchez
  • 704
  • 6
  • 21