THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Advanced CSS Border Radius Tutorial

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>
</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>


Here is the Advanced Border Radius Link 


https://9elements.github.io/fancy-border-radius/full-control.html

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 :)

No comments:

Post a Comment