Advanced CSS Border Radius Tutorial
![]() |
Advanced Border Radius |
Here is the Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<style>
*{
font-family: 'Anton', sans-serif;
letter-spacing: 2px;
}
article{
padding: 50px;
text-align: center;
text-transform: uppercase;
text-decoration: underline;
font-size: 2.5rem;
}
section{
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
div{
width: 200px;
height: 200px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-transform: uppercase;
background-image: linear-gradient(to left, pink, blue);
border-radius: 62% 18% 51% 30% / 59% 59% 28% 10%;
}
.new{
border-radius: 100% 0% 100% 0% / 97% 4% 95% 10%;
}
.new2{
border-radius: 0% 100% 100% 2% / 97% 82% 96% 0%;
}
.new3{
border-radius: 54% 29% 21% 84% / 51% 72% 3% 31%;
}
</style>
</head>
<body>
<article>
<h1 class="animated infinite zoomIn ">Advanced Border-Radius</h1>
<h3> DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi
Believe me, all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :)
</h3>
<h3> DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi
Believe me, all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :)
</h3>
</article>
<section>
<div class="new3">
<h2>thapa</h2>
</div>
<div>
<h2>thapa</h2>
</div>
<div class="new">
<h2>thapa</h2>
</div>
<div class="new2">
<h2>thapa</h2>
</div>
</section>
</body>
</html>
https://9elements.github.io/fancy-border-radius/full-control.html
Here is the Advanced Border Radius Link
https://9elements.github.io/fancy-border-radius/full-control.html