Merge border colors of image with background color

[aynuman19]

how do i merge the colors of the borders of the image to the background so that it will not have ugly outlines, sorry guys i am in a hurry and i need suggestion as much as possible.

what i have tried so far, box shdow, border-transparent and the like and i do not know why it does not work

import { Link, Outlet, useNavigate } from "react-router-dom";
import {
  ClerkProvider,
  SignInButton,
  SignedIn,
  SignedOut,
  UserButton,
} from "@clerk/clerk-react";

import medic from "@/assets/medic.jpg";
import MainNav from "@/components/main-nav";
import { Button } from "@/components/ui/button";
import ThemeSwitch from "@/components/theme-switch";

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;

if (!PUBLISHABLE_KEY) {
  throw new Error("Missing Publishable Key");
}

export default function RootLayout() {
  const navigate = useNavigate();
  return (
    <ClerkProvider navigate={navigate} publishableKey={PUBLISHABLE_KEY}>
      <header>
        <div
          className="bg-[#fbe2e3] -z-50 absolute top-[-6rem] right-[11rem] w-[31.25rem] h-[31.25rem] rounded-full
         blur-[10rem] sm:w-[68.75rem] dark:bg-[#946263]"
        ></div>
        <div
          className="bg-[#dbd7fb] -z-50 absolute top-[-1rem] left-[-35rem] w-[50rem] h-[31.25rem] rounded-full
         blur-[10rem] sm:w-[68.75rem] md:left-[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem] dark:bg-[#676394] "
        ></div>
        <div className="flex px-4">
          <div className="mr-32">
            <img src={medic} width="200px" height="200px" alt="" />
          </div>
          <div className="w-full flex items-center justify-around h-20 border-b">
            <MainNav />

            <ThemeSwitch />

            <SignedIn>
              <UserButton afterSignOutUrl="/" />
            </SignedIn>

            <SignedOut>
              <SignInButton />
            </SignedOut>
          </div>
        </div>
      </header>
      <main className="px-4">
        <Outlet />
      </main>
      <footer></footer>
    </ClerkProvider>
  );
}

[mighty007]

Instead of adding borders around the image, try using it as the background of a container. Adjust the border color to match the background, or apply a soft shadow around the image. If possible, edit the image directly to remove any unwanted outlines or match the background better. may be this helps.