CSS Border Property In Hindi – CSS Borders In Hindi Kiya Hai Or CSS Borders Kyo Istemal Karte Hai And Iska Kiya Istemal Hota Hai, Types Of Css Border In Hindi Ye Sab Ham Aaj Is Post Mai Learn Karne Wale Hai Wo Bhi Step By Step Without Any Confusion |
Yadi Aapne HTML Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai | Kyoki Usme Milenge Aapko HTML Full Course A to Z |
CSS Border Property In Hindi
Contents
CSS Mai Box Model Ko Border Di Jati hai Css Mai Border Ke Liye Style, Width Or Color Bhi Diya Jata Hai. Lekin Ham Inke Bare Mai Step By Step Dekhne Wale Hai |
Types Of CSS Border Properties in Hindi
CSS Border Ko Aapni Like Ke Anushar Customize Karne Ke Liye Hame Types Of Css Border Properties Ki Jarurat Padti Hai | Css Border Ke Alag Alag Style Ke Liye Alag Alag Properties Available Hai |
Border-Styles Property In Hindi
Yah EK Property Hai Jiske Jariye Aap Decide Kar Sakte Ho Ki Aapko Border Ka Konsa Style Chahiye Or Aap Konsa Style, Web age Par Display Karwana Chahte Ho |Is Property Ko Define border-style Se Kiya Jata Hai |
Border Style Property Value List :
- none – Koi Border Nhi Hota Hai.
- solid– Ek Sidhi Line Mai Border Mai Lagti Hai.
- double– Two Sidhi Line Mai Border.
- dashed – Border Line – Dashed Main Badal Jati hai.
- dotted – Border Line. FullStop Main Badal Jati hai.
- groove – Border Line Groove Style Main Dikhai Deti Hai.
- ridge – Border Line Ridge Style Main Dikhai Deti Hai.
- inset – Border Inset Style Main Dikhai Deti Hai.
- outset – Border Outset Style Main Dikhai Deti Hai.
- mix – Border Mix Style Main Dikhai Deti Hai.
Border Style Property Example :
<!DOCTYPE html>
<html>
<head>
<style>
.dashed{
border-style: dashed;
}
.dotted{
border-style: dotted;
}
.double{
border-style: double;
}
.solid{
border-style: solid;
}
.groove{
border-style: groove;
}
.inset{
border-style: inset;
}
.outset{
border-style: outset;
}
.hidden{
border-style: hidden;
}
.none{
border-style: none;
}
</style>
<title>Border Style </title>
</head>
<body>
<h2 class="dashed">This is dashed value</h2>
<h2 class="dotted">It is dotted value </h2>
<h2 class="double">This is double value</h2>
<h2 class="solid">This is solid value</h2>
<h2 class="groove">It is groove value</h2>
<h2 class="inset">This is inset value</h2>
<h2 class="outset">This is outset value</h2>
<h2 class="hidden">It is hidden value</h2>
<h2 class="none">This is none value</h2>
</body>
</html>Jab Aap Kisi Element Ke Liye Border Declare Karte Hai To Vah Charo Tarah Yani ( Top, Right, Bottom, Left ) Se Ek Saman Rahti Hai |
Magar Aap Chahe To Border Ko Individually Bhi Set Kar Sakte Hai. Iske Liye Top Right Bottom Left Values Ka Istemal Karke |
- border-top-style – Isse Element Ki Top Border Ki Style Set Ki Jati Hai.
- border-right-style – Isse Element Ki Right Border Ki Style Set Ki Jati Hai.
- border-bottom-style – Isse Element Ki Bottom Border Ki Style Set Ki Jati Hai.
- border-left-style – Isse Element Ki Left Border की Style Set Ki Jati Hai.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Style</title>
<style>
h4 {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: dotted;
}
</style>
<body>
<h4>This Heading Border is Solid.</h4>
</body>
</html>Upper Diye Code Ko Run Karke Iska Output Check Kar Sakte Hai |
Border-Width Property In Hindi
Is Border Property Duvara Aap Border Ki Width Set Kar Sakte Hai. Border Ko Aap Thin, Medium And Thick Width Main Set Kar Sakte Hai |
Aap Chahe To Border Width Ko px, cm, pt Etc Main Bhi Set Kar Sakte Hai |
Aap Kisi Element Border Ko 4 Side Se Width Set Kar Sakte Hai Jiski Values Niche Di Gayi Hai |
Border-Width Values:-
- border-top-width – Element Ki Top Border Width Set Ki Jati Hai.
- border-right-width – Element Ki Right Border Width Set Ki Jati Hai.
- border-bottom-width – Element Ki Bottom Border Width Set Ki Jati Hai.
- border-left-width – Element Ki Left Border Width Set Ki Jati Hai.
Example :
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Style</title>
<style>
h4 {
border-top-width: 5px;
border-right-width: 3px;
border-bottom-width: 2px;
border-left-width: 1px;
border-style: solid;
}
</style>
<body>
<h4>This Heading Border is Solid.</h4>
</body>
</html>Aap Dekh Sakte Hai Ki Hamne Upper Diye Gaye Code Main Top Right Bottom Left Width Set Kari Hai Ye Hamne Alag Alag Ki hai Aap Is Code Ko Run Karke Iska Output Check Kar Sakte Hai |
Waise Ham Border Width Ko Ek Sath 4 Side Ek Baar Mai Define Kar Sakte Hai Iska Example Niche Diya Gaya Hai |
border-width: top right bottom left;
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Width</title>
<style>
h4 {
border-width: 5px 3px 2px 1px;
border-style: solid;
}
</style>
<body>
<h4>This Heading Border is Solid.</h4>
</body>
</html>Upper Diye Code Ko Run Karke Iska Output Check Kar Sakte Hai |
Border Color Property In Hindi
CSS Border Color Property Ko Border-color Ke Duvara Define Kiya Jata Hai | Is Property Ke Duvara Aap Border Ke Charo Or Yani Top Right Bottom Left Ke Color Ko Change Kar Sakte Ho |
Jaisa Ki Aap Jante Hai Ki CSS Color Ko Aap Chahe To Name Ke Duvara Ya Hex Value Ya RGB Value Duvara Bhi Define Kar Sakte Ho |
Aap Chahe To Border Color Ko Alag-Alag 4 Types Ki Value Se Bhi Define Kar Sakte Ho |
Border-color Values List
- border-top-color – Top Border Ka Color Set Kiya Jata Hai.
- border-right-color – Right Border Ka Color Set Kiya Jata Hai.
- border-bottom-color – Bottom Border Ka Color Set Kiya Jata Hai.
- border-left-color – Left Border Ka Color Set Kiya Jata Hai.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Color</title>
<style>
h4 {
border-top-color: black;
border-right-color: green;
border-bottom-color: yellow;
border-left-color: orange;
border-style: solid;
}
</style>
<body>
<h4>This Heading Border is Solid And Differrent Color.</h4>
</body>
</html>Aap Dekh Sakte Hai Ki Hamne Upper Diye Gaye Code Main Top Right Bottom Left Color Set Kara Hai Ye Hamne Alag Alag Ki hai Aap Is Code Ko Run Karke Iska Output Check Kar Sakte Hai |
Waise Ham Border Color Ko Ek Sath 4 Side Ek Baar Mai Define Kar Sakte Hai Iska Example Niche Diya Gaya Hai |
border-color: top right bottom left;
Example:–
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Color</title>
<style>
h4 {
border-color: black green yellow orange;
border-style: solid;
}
</style>
<body>
<h4>This Heading Border is Solid And Differrent Color.</h4>
</body>
</html>Upper Diye Code Ko Run Karke Iska Output Check Kar Sakte Hai |
Border-radius Property In Hindi
Border Ke Kono Yani Corner Side Ki Gulai Yani Radius Set Karne Ke Liye border-radius Property Ka Istemal Kiya Jata Hai.
Aap Iski Value Pixels, Points Ya FIr Percentage Main Bhi Set Kar Sakte Hai |
Border-radius Values List:
- border-top-left-radius:
- border-top-right-radius:
- border-bottom-left-radius:
- border-top-right-radius:
Example:-
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Radius</title>
<style>
h4 {
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 10px;
border-style: solid;
border-color: green;
}
</style>
<body>
<h4>This Heading Border is Solid And Differrent Radius.</h4>
</body>
</html>Aap Dekh Sakte Hai Ki Hamne Upper Diye Gaye Code Main Top: Left -Right Bottom: Left – Right Radius Set Kari Hai Ye Hamne Alag Alag Ki hai Aap Is Code Ko Run Karke Iska Output Check Kar Sakte Hai |
Waise Ham Border Radius Ko Ek Sath 4 Side Ek Baar Mai Define Kar Sakte Hai Iska Example Niche Diya Gaya Hai |
border-radius: top-left top-right bottom-right bottom-left;
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Radius</title>
<style>
p{
/*top-left top-right bottom-right bottom-left */
border-radius: 5px 10px 10px 5px;
border-style: solid;
border-color: green;
}
</style>
<body>
<p>This is Border Radius In One Line </p>
</body>
</html>Upper Diye Code Ko Run Karke Iska Output Check Kar Sakte Hai |
Friends Mujhe Umeed Hai Ki Aapko CSS Borders Property In Hindi Ke Bare Mai 100% Jankari Ho Gayi Hogi | Agar Aapko Learn Karne Main Dikkat Aa Rahi Hai To Aap Mere Se Contact Kar Sakte Hai |
