Border radius - CSS Tutorial for beginners in 1 Minute #shorts

CSS Border Radius is the way we curve the edges of HTML elements. Here I show you how it works, how to use it and a couple of fun tricks for circles and other shapes.

[vinodsaggam]

div {
width :100px;
height :100px;
border-top-left-radius: 100px;
background-color: red;
}

[maroofshaikh]

Easy to way learning and clearity in video is best

[trevormeth]

Wow! I never knew to specify a corner whose radius I wanted to curve. I've just learnt it here.

[ezekielpeace]

<div class="curve"></div>

<style>
.curve{
width: 100px;
height: 100px;
background-color: rgba(114, 155, 233, 0.884);
border: 3px solid rgb(0, 128, 0) ;
border-top-left-radius: 100px;

}
</style>

[Borj]

This is exactly what I've been looking for to shape every edge of my box or button. Thanks man.

[son_of_godz]

Thx buddy in 2023 still iam learning from u ❤

[deepakzaro]

love this changes... do more like this

[Kakashi-sryr]

background-color: blue;
border: 3px solid green;
width: 100px;
height: 100px;
margin: 2em auto;
border-top-right-radius: 700px;

[rohanagrawal]

waiting for your javascript mastery course

[ishvavisavadiya]

<style>
.border-radius{
width:200px;
height: 200px;
border: solid rgb(10, 77, 115) 3px;
background-color: rgb(164, 178, 195);
border-top-left-radius:100% ;
}
</style>

<div class="border-radius"></div>

[Will-Britt]

How did you get the box to move in real time like that?

[aymanekabti]

div{
background-color: aqua;
height: 500px;
width: 500px;
border-top-left-radius:100%;
border-bottom-left-radius: 45deg;

}

[drhasnainsikandar]

.border{
hieght:50px;
width:50px;
border-top-left-radius:50%;
}

[_asadx]

What to do when after setting border radius its upper and left color changes to dark color but bottom and right border color is light. How to fix it??

[punkerts]

border-radius-top-left: 50%;
Boom, done! 😎