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>
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
