Is there an explanation to the white border not show?

Question

I'm building a project, trying to create a cool profile picture overlay the gray box. The problem is that when I use a white border color, it doesn't show off, but when I change it to black, it appears.

The border that is supposed to be white is black, in the line:

<img class="z-50 w-32 h-32 border-4 border-black border-solid rounded-full" src='{{ Storage::url("$user->id/$user->profilepicture") }}' alt="">

Fullcode:

  <div class="w-full -space-y-8">
    <div class="h-24 bg-fixed rounded bg-lightgray mix-blend-multiply">
    <a href="/">
                <img src="{{asset('/source')}}/cameraicon.png" class="pt-6 mx-auto opacity-50 fill-greenwater" alt="applogo">
            </a>
    </div>
      <div class="z-10 flex justify-center pb-10 bg-whiteborder mix-blend-multiply">
        
      <table>
        <tr>
         <td class="py-4 pl-6 pr-3 mx-auto whitespace-nowrap">
           <img class="z-50 w-32 h-32 border-4 border-black border-solid rounded-full" src='{{ Storage::url("$user->id/$user->profilepicture") }}' alt="">

         </td>
         <td class="py-4 pr-6 text-left whitespace-nowrap">
         <h1 class="mt-2 text-2xl font-black">{{$user->name}}</h1>
         <div class="text-sm font-medium text-gray">919 Seguidores</div>
         </td>
         <td class="pl-20 pr-24 whitespace-nowrap">
         </td>
         <td class="px-6 py-4 whitespace-nowrap">
                      
      @if ($user->id == $currentUserId) 
      <a href="{{$user->id}}/edit">
      <button class="flex justify-center px-3 py-2 ml-1 text-sm font-bold border rounded border-lightgray w-52 bg-greenwater text-fullblack">
      Editar Perfil 
      </button>
      </a>
      @else
      <button class="flex justify-center px-3 py-2 ml-1 text-sm font-bold border rounded border-lightgray w-52 bg-greenwater text-fullblack">
     Seguir 
      </button>
       @endif
       </td>
      </tr>
       </table>
     </div>
    <hr class="pb-12 text-greenwater">
  </div>

Black one working:

When I change the border to an white color, used in other pages and fully working on ther things, it show like:

<img class="z-50 w-32 h-32 border-4 border-solid rounded-full border-newwhite" src='{{ Storage::url("$user->id/$user->profilepicture") }}' alt="">

Please provide a [mcve]. Emphasis on the minimal. I don't know which part of that code is supposed to be showing the white border. Is it `bg-whiteborder`? That looks like a typo. — Quentin, May 26 '22 at 15:38
Use [a validator](https://validator.nu/). `` elements many **not** contain ` — Quentin, May 26 '22 at 15:39
Updated, the border is "border-black", on the ``, because white border don't show off. — eitibiti, May 26 '22 at 15:43
I don't think so there is a class named `border-newwhite` unless you added one in configuration. It should be `border-white`. Also if you see closely you can see that there is a white border around image. — charchit, May 26 '22 at 16:22
and the white border isn't looking as the black one, which is meant to — eitibiti, May 26 '22 at 17:37
can you show the added color. Try using border-white. and as I already told the border can be seen if we look closer but due to the image color and background. it's kinda invisible. — charchit, May 26 '22 at 17:44

Is there an explanation to the white border not show?

0 Answers0