Custom Border Radius in CSS | border-radius | HTML CSS | Pcoder7

Custom Border Radius in CSS

If You want more shapes like this:

HTML and CSS Code:

<style>
.containerTrAnim2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
height: 100vh;
background: rgb(253, 255, 253);
}

.containerTrAnim2div {
margin: 0.5em;
height: 200px;
width: 150px;
}

.containerTrAnim2div-1 {
background-color: blueviolet;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%  !important;
}

.containerTrAnim2div-2 {
background-color: rgb(215, 0, 253);
border-radius: 44% 10% 44% 10% / 56% 10% 47% 10% !important;
}

.containerTrAnim2div-3 {
background-color: rgb(255, 145, 0);
border-radius: 100% 10% 97% 0% / 37% 10% 48% 10% !important;
}

.containerTrAnim2div-4 {
background-color: cyan;
border-radius: 100% 67% 100% 100% / 100% 73% 80% 83% !important;
}
</style>
<div class="containerTrAnim2">
<div class="containerTrAnim2div containerTrAnim2div-1"></div>
<div class="containerTrAnim2div containerTrAnim2div-2"></div>
<div class="containerTrAnim2div containerTrAnim2div-3"></div>
<div class="containerTrAnim2div containerTrAnim2div-4"></div>
</div>