How to Fix CSS Issues on Safari

Different browsers serve the web page content differently, which can cause problems while using some CSS properties. To solve these issues, it is important to use standard, widely supported CSS rules.

While older versions of Safari had limited support for certain CSS properties, modern Safari fully supports standard properties without workarounds.

Displaying properties in Safari

There is a CSS appearance property used to display an element using a platform-native styling based on the users' operating system theme. It is primarily intended for form controls to strip native OS styling. To remove native styling on Safari, set the <span class="property">appearance</span> property to none.

For standard properties like border-radius and background-color, modern Safari natively supports them without vendor prefixes or appearance overrides.

Let’s see an example of correctly applying the border-radius property on Safari.

Example of making the border-radius property work on Safari:

How to apply the border-radius property on Safari

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 100px;
        width: 17%;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

The background-color property may also cause problems on older browsers, but modern Safari handles it natively. Let’s see one more example.

Example of making the background-color property work on Safari:

How to apply the background-color property on Safari

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #8ebc42;
      }
    </style>
  </head>
  <body>
    <h2>Background-color Property Example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »