我正在一个名为www.example.com的网站上工作，该网站的水平+垂直边框半径不可用，我只能使用内联CSS。我为一个电子鸟（鸡蛋）形状的页面做了一个代码，需要这样的功能，我正在寻找一个替代的方法来创建相同的效果。我在我的div上使用的CSS是：toyhou.se in which horizontal+vertical border-radius is not available and I can only use inline CSS. I made a code for a Tamagotchi (egg) shaped pagedoll than requieres such function and I'm looking for an alternative way of creating the same effect. The css I used on my div is: border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% .
Correct shape：在www.example.com上看起来是什么样子，我总是在那里编码以在ToyHouse中使用。此页面的大多数设置与ToyHouse相同，但可能会发生一些白名单代码在此处可用，而在另一个页面上不可用的情况。th.circlejourney.net where I always code to use in ToyHouse. Most of the settings of this page are the same as ToyHouse but it can happen that some whitelisted code is available here but not on the other.
Incorrect shape：代码在www.example.com上的外观toyhou.se
完整代码：

<div class="container p-2">
    <div class="row no-gutters">
        <div class="col-auto overflow-hidden d-flex flex-column align-items-center justify-content-center" style="width: 167px; height: 202px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: 6px solid #673388; background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/33482918_y7Ci5NMXmOcA865.png) no-repeat center; background-size: cover">
            <div style="opacity: 0.5; color: #8f49bb; margin-top: 10px;">
                <i class="fa-solid fa-cloud fa-rotate-180 fa-3x" style=" vertical-align: top;"></i>
                <i class="fa-solid fa-cloud fa-rotate-180 fa-2x" style="margin-left: -10px; vertical-align: top;"></i>
                <i class="fa-solid fa-cloud fa-rotate-180 fa-3x" style="margin-left: -10px; vertical-align: top;"></i>
            </div>
            <div class="mt-2 p-1" style="width: 75px; height: 75px; border: 3px solid #673388 ; background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/33306534_A5htslLMboAMqI3.png); background-size: cover"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/14048794_mz7myAcDurhTBqb.png?1661809559"></div>
            <div class="font-weight-bold" style="color: #673388;">Fideo</div>
            <div class="row">
                <div style="width: 17px; height: 17px; border-radius: 50%; background-color: #8f49bb; border: 3px solid #673388;"></div>
                <div class="mt-2" style="width: 17px; height: 17px; border-radius: 50%; background-color: #8f49bb; border: 3px solid #673388; margin-left: 12px; margin-right: 12px"></div>
                <div style="width: 17px; height: 17px; border-radius: 50%; background-color: #8f49bb; border: 3px solid #673388;"></div>
            </div>
            <div style="opacity: 0.5; color: #8f49bb; margin-top: -5px">
                <i class="fa-solid fa-cloud fa-3x"></i>
                <i class="fa-solid fa-cloud fa-2x" style="margin-left: -10px"></i>
                <i class="fa-solid fa-cloud fa-3x" style="margin-left: -10px"></i>
            </div>
        </div>
    </div>
</div>

我试着用一张图片来做背景，但是代码的效果和我想要的不一样，用-webkit-border-radius: 50%/50% ; border-radius: 40%/60%;也没有达到同样的效果。