Connect with us

tech help

▷How To Make CSS3 Rounded Corners-IN Html Page ( हिंदी )

rounded corners css3- CSS3 Rounded Corners- how can you created rounded corners using css3?- how can you create rounded corners using css3- rounded corners in css3- rounded corners css

हेलो हम आपका अभिन्दन करते है। जैसा की आप जानते है । की हम आपको CSS3 Rounded Corners की में जानकारी प्रदान करने वाले है। हमारी कोशिश यही रहती है। की हम आपको सही और पूरी जानकारी आसानी से समझा पाए। ताकि आपको कार्य करने के दौरान किसी प्रकार से परेशानी न रहे।

CSS3 Rounded Corners

सबसे पहले हम आपको जानकारी प्रदान करना चाहते है। आपको इस पोस्ट के माध्यम से यह जानकारी प्राप्त हो जाएगी। हम किसी element यानिकि button, image, div, span आदि को कितने प्रकार से border-radius दे सकते है । तो हम इसमें हम element के चारो कोने के साथ साथ अलग अलग कोनो को रेडियस बॉर्डर देना सीखाएंगे। image को border-radius देना। व साथ ही element को background color के साथ बॉर्डर देना भी जानेंगे।

CSS border-radius Property with Paragraph

सबसे पहले हम बात करते है। किसी element के चार कोनो को एक समान गोलाईं देना यानिकि Rounded Corner करना। इसके लिए कुछ इस प्रकार से हमें code लिखने आवश्कता होगी।

try code

<!DOCTYPE html>
<html>
<head>
<style> 
#pro1 {
  border-radius: 25px;
  background: #1824d6;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}
#pro2 {
  border-radius: 25px;
  border: 2px solid #1824d6;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}
#pro3 {
  border-radius: 25px;
  background: url(Align.jpg);
  background-position: left top;
  border: 2px solid #ff002b;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="pro1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="pro2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="pro3">Rounded corners!</p>
</body>
</html>

इस इमेज में हम देख सकते है। की हमें इस code का आउटपुट कुछ इस प्रकार दिखाई देगा।

rounded corners css3- CSS3 Rounded Corners- how can you created rounded corners using css3?- how can you create rounded corners using css3- rounded corners in css3- rounded corners css

इसमें हमने तीन बॉक्स बनाये है। जो की हमारे तीन p एलिमेंट है। इसमें सबसे ऊपर वाले बॉक्स को हमें background color नीला दिया है। इसके लिए हमने background: #1824d6; यह code लाइन लिखी है। व box के चारो कोनो को थोड़ी गोलाई दी है। इसके लिए हमने border-radius: 50px; लिखा है। इसी प्रकार हमने तीनो box के कोनो को थोड़ी थोड़ी गोलाई दी है। अगर आप इस गोलाई को अधिक करना चाहते है। तो आप 50px की संख्या को अधिक कर सकते है। हम आपको बता दे की अगर आप border-radius: के आगे केवल एक वेल्यू लिखते है। तो वह चारो कोनो पर अप्लाय हो जाती है। तो आप इस प्रकार किसी भी element को background color व border-radius प्रदान कर सकते है।

दूसरे box में हमने background कलर नहीं दिया बल्कि केवल border: 2px solid #1824d6; लिखा है। जिसके कारण दूसरे box में केवल बाहर की तरफ हमें एक नील color की बॉर्डर दिखाई दे रही है। इस प्रकार आप किसी भी element को Border प्रदान कर सकते है।

तीसरे और लास्ट box में हमने एक image को जोड़ा है। जैसा की आप देख सकते है। तीसरे box में हमें एक image दिखाई दे रही है। इस image को जोड़ने के लिए हमने background: url(Align.jpg); की css code लाइन लिखी है। जैसा की आप देख सकते है। किसी भी image जोड़ने के लिए हमें कुछ इस प्रकार background: url(Align.jpg); से code को लिखने की आवश्कता होती है। इस कोड में हमने (Align.jpg) लिखा है। यह हमारी image का नाम है। आप जिस भी image को जोड़ना चाहते है। आपको केवल उस image का नाम उसके क्सटेंसन के साथ लिखना है। जिस प्रकार हमने image के नाम के पीछे .jpg लिखा है। क्योंकि हमारी इमेज jpg फॉर्मेट की है। इसी प्रकार अगर image .png या अन्य फॉर्मेट की होती तो हमें वही फॉर्मेट लिखना होता। तो आप फॉर्मेट को जोड़ना नहीं भूले अगर आप फॉर्मेट नहीं लिखते है। image जुड़ नहीं पायेगी।

Specify Corner CSS border-radius

अब हम ये जानकरी लेते है। अगर हम किसी element के अलग अलग कोनो को अपने आवश्कता अनुशार गोलाई प्रदान करना चाहे तो वह किस प्रकार हो पायेगा। इसके लिए सबसे पहले हम code लिखते है। और उसका आउटपुट देखते है। ताकि हमें समझने में आसानी हो पाए।

try code 

<!DOCTYPE html>
<html>
<head>
<style> 
#rcorners1 {
  border-radius: 13px 55px 35px 8px;
  background: rgb(7, 3, 252);
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 16px 56px 33px;
  background: rgb(7, 3, 252);
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 18px 57px;
  background: rgb(7, 3, 252);
  padding: 20px; 
  width: 200px;
  height: 150px; 
</style>
</head>
<body>
<h1>The border-radius Property xperiment</h1>
<p>Four values xperiment- border-radius: 13px 55px 35px 8px:</p>
<p id="rcorners1"></p>
<p>Three values xperiment- border-radius: 16px 56px 33px:</p>
<p id="rcorners2"></p>
<p>Two values - xperiment border-radius: 18px 57px:</p>
<p id="rcorners3"></p>
</body>
</html>

हमें इस कोड का आउटपुट कुछ इस प्रकार दिखाई दे रहा है। इसमें हमें कुल तीन box दिखाई दे रहे है। चलिए अब हम समझते है। किस प्रकार code लिखा गया है। कोनसे code का क्या अर्थ होता है।

rounded corners css3- CSS3 Rounded Corners- how can you created rounded corners using css3?- how can you create rounded corners using css3- rounded corners in css3- rounded corners css

पहले box के कोनो को अगल अलग गोलाई प्रदान करने के लिए हमें कुछ इस प्रकार border-radius: 13px 55px 35px 8px; code लिखा है। जिसमे पहली वेल्यू यानिकि 13px बॉक्स के top-left corner के लिए है। दूसरी वेल्यू यानिकि 55px बॉक्स के top-right corner के लिए है। तीसरी वेल्यू यानिकि 35px बॉक्स के bottom-right corner के लिए है। चौथी वेल्यू यानिकि 8px बॉक्स के bottom-left corner के लिए है।

दूसरे box के कोनो को अगल अलग गोलाई प्रदान करने के लिए हमें कुछ इस प्रकार border-radius: 16px 56px 33px; लिखा है। जिसमे पहली वेल्यू यानिकि 16px बॉक्स के top-left corner के लिए है। दूसरी वेल्यू यानिकि 56px बॉक्स के top-right and bottom-left corners के लिए है। तीसरी वेल्यू यानिकि 33px बॉक्स के bottom-right corner के लिए है।

तीसरे box के कोनो को अगल अलग गोलाई प्रदान करने के लिए हमें कुछ इस प्रकार border-radius: 18px 57px; लिखा है। जिसमे पहली वेल्यू यानिकि 18px बॉक्स के top-left and bottom-right corners के लिए है। दूसरी वेल्यू यानिकि 57px बॉक्स के top-right and bottom-left corners के लिए है।

elliptical border Rounded Corners

अगर हम किसी भी element को अंडाकार गोलाई प्रदान करना चाहते है। तो हम किस प्रकार अंडाकार गोलाई प्रदान करेंगे। चलिए जानते है। सबसे पहले कोड को लिखते है।

try code

<!DOCTYPE html>
<html>
<head>
<style> 
#rock1 {
  border-radius: 20% / 50%;
  background: blue;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rock2 {
  border-radius: 50% / 20%;
  background: blue;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rock3 {
  border-radius: 100%;
  background: blue;
  padding: 20px; 
  width: 200px;
  height: 150px;
</style>
</head>
<body>
<div style="
text-align: -webkit-center;">
<h1>Elliptical border-radius Property xperiment</h1>
<p>Elliptical border xperiment - border-radius: 20% / 50%:</p>
<p id="rock1"></p>
<p>Elliptical border xperiment - border-radius: 50% / 20%:</p>
<p id="rock2"></p>
<p>Ellipse border xperiment - border-radius: 100%:</p>
<p id="rock3"></p>
</div>
</body>
</html>

हमें इस code का आउटपुट कुछ इस प्रकार दिखाई देता है। इसमें हमें इसमें हमें तीन box दिखाई दे रहे। जिनका आकर कुछ अंडाकार जैसा है। चलिए जानते है।

rounded corners css3- CSS3 Rounded Corners- how can you created rounded corners using css3?- how can you create rounded corners using css3- rounded corners in css3- rounded corners css

आप देख सकते है। पहले box को अंडाकार गोलाई प्रदान करने के लिए हमने border-radius: 20% / 50%; वेल्यू प्रदान की है। जिसमे 20% लिखने से बॉक्स के top व bottom की गोलाई 20% प्रदान हुई है। और 50% लिखने से बॉक्स की left व right की गोलाई 50% प्रदान हुई है।

इसी प्रकार दूसरे बॉक्स को हमने पहले बॉक्स की वेल्यू के विपरीत लिखा है। यानिकि border-radius: 50% / 20%; जिसके कारण दूसरे box आकर पहले पहले बॉक्स के विपरीत यानिकि उल्टा है।

तीसरे बॉक्स को देख सकते है। यह बिलकुल अंडाकार आकृति का दिखाई दे रहा है। इसकी वेल्यू हमने border-radius: 100%; लिखी है। इसी कारण इसका आकर अंडाकार दिखाई दे रहा है। आशा करते है। आप राउंड बॉर्डर का निर्माण करना सीख चुके है।

अगर आपके दिमाग में कोई सवाल हो तो आप हमें कमेंट के माध्यम से पूछ सकते है। इसी प्रकार से अन्य आवश्क जानकारी प्राप्त करने के लिए हमरी वेबसाइट को बुकमार्क करे। ताकि अगली बार जब आप कोई जानकारी की खोज करे तो आसानी से पहुंच पाए। धन्यवाद

read more

▷Onclick Show Hide Div Jquery Demo

▷how to insert video in html5 using notepad

▷How To Button Align Center Css

Information Source: w3school

Click to comment

Leave a Reply

tranding