csscss-selectorsbordertext-decorationstext-styling

Solution for CSS Border iOS appearance issue?


I recently added the following code to one of my text elements to add a cool underline to it:

border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 1;
width: fit-content!important;

It looks like this on chrome and Android: live picture here

However, on iOS devices the border completely surrounds the whole text and looks like this: iOS live picture here

I tried some -webkit and -moz-fit-content type of things but since I am not actively in programming I did not get it to work.

I hope someone can help with this problem and I appreciate your solutions!

Best regards!


Solution

  • In your border-image-slice, give it precision and it will be ok :) I've tested it and it works on Safari v 13.1.2

    Aurélie

    p {
      border-bottom: 2px solid transparent!important;
    border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
    border-image-slice: 0 0 1 0;
    width: fit-content!important;
    }
    <p>Biscuit cake sweet roll. Carrot cake caramels</p>