sorry for the confusing title. in my website, the border radius looks a bit weird. it looks normal on the top and bottom sides but on the left and right, it looks like its cut off at an angle. I'm pretty sure it's because a missing CSS tag but I don't know what. I'm looking to fix this. I know the site has a bunch of other problems but I'm only looking to fix this one.
here's the site if you want to take a look: iranskymc.ir
thanks to anyone who is willing to help and not bully.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IranSky</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@font-face {
font-family: main-font;
src: url("/static/font-mikhak.ttf");
}
body {
font-family: main-font;
background-image: url("/static/back.png");
background-repeat: no-repeat;
}
.rtl {
direction: rtl;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
text-align: center;
}
.center-right {
justify-content: center;
display: flex;
}
.align-horizontal {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.discord {
color: #3e3d88;
}
.donate {
color: #ac8b31;
}
.minecraft {
color: rgb(29, 206, 29);
}
.container{
backdrop-filter: blur(10px);
padding: 3em;
border-radius: 15%;
box-shadow: 2px 1px 5px black;
}
.icon-link {
margin-left: 5px;
margin-right: 5px;
}
.down-margin {
margin-bottom: 2rem;
}
a {
text-decoration: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
color: black;
}
</style>
</head>
<body>
<noscript>IranSky Needs A Brain To Work So Please Enable Javascript</noscript>
<script>
const SERVER_NAME = "IranSkyMC"
const SERVER_IP = "Play.IranSkyMC.iR"
function mc_server(){
alert(`Ip ${SERVER_NAME}, ${SERVER_IP} AST!`);
}
</script>
<div class="center main">
<div class="container">
<h1 class="rtl" >ایران اسکای</h1>
<h2 class="rtl down-margin" >تجربه بهتری از ماینکرافت داشته باشید</h2>
<div class="align-horizontal center-right">
<a class="fab fa-discord discord icon-link fa-2xl" href="https://discord.gg/mc8mXd5QMF"></a>
<a class="fas fa-coins donate fa-2xl icon-link" href="/redirect/donate"></a>
<a class="fas fa-network-wired minecraft fa-2xl icon-link" href="#" onclick="mc_server()"></a>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</body>
</html>