If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
अभी तक आपने के बारे में border-width , border-style , border-color के बारे में पढ़ा और समझा , इन properties का use करके आप किसी भी HTML Element के लिए border define करते थे। लेकिन इनके अलावा एक shorthand border property भी होती है , जिसकी help से आप एक ही बार में border width , style , color define कर सकते हैं।
element{
border : width style color;
}border: 10px outset red;
border: 15px inset goldenrod;
border: 5px dashed green;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS border shorthand Example</title>
</head>
<body>
<h1 style="border: 10px outset red;">border shorthand Example</h1>
<h1 style="border: 15px inset goldenrod;">border shorthand Example</h1>
<p style="border: 5px dashed green;">border shorthand Example</p>
</body>
</html>हालांकि आप border की हर एक side को अलग अलग भी define कर सकते हैं।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS border-top Example</title>
</head>
<body>
<p style="border-top:8px solid goldenrod;">border-top Example</p>
</body>
</html>border-top Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS border-bottom Example</title>
</head>
<body>
<p style="border-bottom:8px solid green;">border-bottom Example</p>
</body>
</html>border-bottom Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS border-left Example</title>
</head>
<body>
<p style="border-left:8px solid red;">border-left Example</p>
</body>
</html>border-left Example
आप border-radius property का use करके border को rounded भी बना सकते हैं।
p{
border:8px inset green;
border-radius: 5px;
}
Output :
border-radius: 5px;
और आप चाहे तो border की हर side को अलग तरह से भी round कर सकते हैं।
border-radius: 20px 15px 10px 5px;
border-radius: 5px 10px 15px 20px;
border-radius: 15px 3px 3px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS border-radius Example</title>
</head>
<body>
<p style="border:8px inset green;border-radius: 20px 15px 10px 5px;">border-radius: 20px 15px 10px 5px;</p>
<p style="border:8px inset gold;border-radius: 5px 10px 15px 20px;">border-radius: 5px 10px 15px 20px;</p>
<p style="border:8px inset red;border-radius: 15px 3px 3px">border-radius: 15px 3px 3px;</p>
</body>
</html>