Bootstrap Rounded Corner Classes - Bootstrap5 Tutorial 22

Notes for You:: Bootstrap Rounded Corner Classes.

rounded:
- sets the 6 pixels (i.e. 0.375 rem) border radius on all corners of an html element
- rounds all corners of an html element by 0.375 rem i.e. 6 pixels

rounded-top:
- sets the 6 pixels border radius on top left and top right corners of an html element
- rounds top left and top right corners of an html element by 0.375 rem i.e. 6 pixels

rounded-end:
- sets the 6 pixels border radius on top right and bottom right corners of an html element
- rounds top right and bottom right corners of an html element by 0.375 rem i.e. 6 pixels

rounded-bottom:
- sets the 6 pixels border radius on bottom left and bottom right corners of an html element
- rounds bottom left and bottom right corners of an html element by 0.375 rem i.e. 6 pixels

rounded-start:
- sets the 6 pixels border radius on bottom left and top left corners of an html element
- rounds bottom left and top left corners of an html element by 0.375 rem i.e. 6 pixels

rounded-circle:
- sets the 50% border radius on all corners of an html element
- use it to display an html element in circle or oval shape

rounded-0:
- sets the 0px border radius on all corners of an html element
- use it to remove rounded corners of an html element


Comple Code:

﹤!doctype html﹥
﹤html lang="en"﹥
﹤head﹥
﹤meta charset="utf-8"﹥
﹤title﹥Bootstrap demo﹤/title﹥
﹤meta name="viewport" content="width=device-width, initial-scale=1.0"﹥
﹤link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"﹥
﹤/head﹥
﹤body﹥

﹤div style="width:100px; height:100px;" class="bg-primary m-1 rounded"﹥
﹤/div﹥

﹤div style="width:100px; height:100px;" class="bg-warning m-1 rounded-top"﹥
﹤/div﹥

﹤div style="width:100px; height:100px;" class="bg-danger m-1 rounded-end"﹥
﹤/div﹥

﹤div style="width:100px; height:100px;" class="bg-success m-1 rounded-bottom"﹥
﹤/div﹥

﹤div style="width:100px; height:100px;" class="bg-info m-1 rounded-start"﹥
﹤/div﹥

﹤div style="width:100px; height:100px;" class="bg-secondary m-1 rounded-circle"﹥
﹤/div﹥

﹤div style="width:150px; height:100px;" class="bg-secondary m-1 rounded-circle"﹥
﹤/div﹥

﹤div style="width:100px; height:150px;" class="bg-secondary m-1 rounded-circle"﹥
﹤/div﹥

﹤div style="width:100px; height:100px;" class="bg-info m-1 rounded rounded-0"﹥
﹤/div﹥

﹤div style="width:100px; height:100px; border-radius:50%;" class="bg-info m-1"﹥
﹤/div﹥

﹤div style="width:100px; height:100px; border-top-left-radius:10px; border-top-right-radius:10px; " class="bg-info m-1"﹥
﹤/div﹥

﹤script src="jquery/jquery.min.js" type="text/javascript"﹥﹤/script﹥
﹤script src="popper/popper.min.js" type="text/javascript"﹥﹤/script﹥
﹤script src="bootstrap/js/bootstrap.min.js" type="text/javascript"﹥﹤/script﹥
﹤/body﹥
﹤/html﹥


Note:
- replace ﹤ with less-than symbol.
- replace ﹥ with greater-than symbol.

=========================================

Follow the link for next video:
https://youtu.be/RNHXELrxedU

Follow the link for previous video:
https://youtu.be/Fa0F9ZpAthE

=========================================

Bootstrap5 Tutorials Playlist:
https://www.youtube.com/playlist?list=PLdE8ESr9Th_tgGKttdOp9YWporo2zEr5Q

Bootstrap4 Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_vnCOUPx1fhQLRZGENyfuMG

=========================================
Watch my other useful tutorials:-

Dreamweaver Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_sGP0m9D68jHqZQr_qRzDXk

PHP Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_s8zash4d8He_49QS_VVmAG

MySQL Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_tvPGAlbOEc-0_qleTOBgmU

=========================================

Subscribe to our YouTube channel:-
https://www.youtube.com/chidrestechtutorials

Join as member of our YouTube channel:-
https://www.youtube.com/chidrestechtutorials/join

Become our Patron:-
https://www.patreon.com/chidrestechtutorials

Visit our Website:-
https://www.chidrestechtutorials.com

Download our notes from Instamojo:-
https://chidrestechtutorials.myinstamojo.com

Buy our products on Spring:-
https://chidres-tech-tutorials.creator-spring.com

=========================================
Hash Tags:-
#ChidresTechTutorials #Bootstrap #BootstrapTutorial #Bootstrap5