Border
CSS Border
Border అనేది HTML element చుట్టూ కనిపించే అంచు లేదా గీత. ఇది CSS box model లో content మరియు margin మధ్య ఉండే భాగం. ఒక card, button, image లేదా notice చుట్టూ అంచు ఇవ్వడానికి border ఉపయోగిస్తాము.
Border ఎందుకు ఉపయోగిస్తాము?
- ఒక element యొక్క అంచును స్పష్టంగా చూపించడానికి.
- Card, form లేదా notice ను ఇతర content నుండి వేరు చేయడానికి.
- Page design కు structure మరియు visual emphasis ఇవ్వడానికి.
Border రాయే విధానం
సాధారణంగా border ను మూడు భాగాలతో రాస్తాము: width, style, మరియు color.
border: 3px solid #2563eb;- 3px border యొక్క మందాన్ని సూచిస్తుంది.
- solid border యొక్క గీత రకాన్ని సూచిస్తుంది.
- #2563eb border యొక్క రంగును సూచిస్తుంది.
Border style ఇవ్వడం తప్పనిసరి. ఉదాహరణకు solid, dashed, మరియు dotted వంటి styles ఉపయోగించవచ్చు.
వేర్వేరు border properties
border-width: 3px;
border-style: solid;
border-color: #2563eb;ఈ మూడు declarations కలిపి border: 3px solid #2563eb; అనే shorthand కు సమానం. ఒకే element కు ప్రతి side కి వేర్వేరు border కూడా ఇవ్వవచ్చు, కానీ మొదట shorthand మరియు basic border styles పై దృష్టి పెట్టండి.
Border మరియు Box Model
ఒక element లో content చుట్టూ padding ఉంటుంది. Padding తరువాత border ఉంటుంది. Border తరువాత బయట margin ఉంటుంది. కాబట్టి border element యొక్క బయట అంచును చూపిస్తుంది మరియు element యొక్క మొత్తం పరిమాణానికి చేరుతుంది.
Simple Explanation
ఒక కాగితానికి చుట్టూ గీత గీసినట్లు, HTML element చుట్టూ గీత ఇవ్వడమే CSS border. Border కనిపించాలంటే width, style, color లో కనీసం style మరియు సాధారణంగా width, color ఇవ్వాలి.
ఉదాహరణకు border: 2px solid black; అంటే 2 pixels మందం కలిగిన నల్లని solid border అని అర్థం. Border ను మార్చడానికి value మార్చి browser లో మళ్లీ run చేయండి.
Real-Life Example
ఒక notice board పై ఉన్న ముఖ్యమైన ప్రకటన చుట్టూ frame ఉంటే అది వెంటనే కనిపిస్తుంది. అదే విధంగా CSS border ను card లేదా notice చుట్టూ ఉంచితే ఆ content ప్రత్యేకంగా కనిపిస్తుంది. Border content లోపల ఉండదు; content మరియు బయట ఉన్న space మధ్య అంచుగా ఉంటుంది.
Code Examples
Card కు Solid Border ఇవ్వడం
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Border Example</title>
<style>
.card {
width: 260px;
padding: 20px;
border: 3px solid #2563eb;
background-color: #eff6ff;
}
.card h2 {
margin-top: 0;
color: #1e3a8a;
}
</style>
</head>
<body>
<div class="card">
<h2>Learning CSS</h2>
<p>This card has a blue border.</p>
</div>
</body>
</html>ఈ runnable example లో .card element కు blue solid border ఇచ్చాము. padding text మరియు border మధ్య space ఇస్తుంది. border card యొక్క బయట అంచును చూపిస్తుంది.
A light blue card appears with inner spacing and a 3-pixel solid blue border. It contains the heading Learning CSS and a paragraph.
వేర్వేరు Border Styles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border Styles</title>
<style>
.solid-box {
border: 3px solid #16a34a;
padding: 10px;
margin-bottom: 10px;
}
.dashed-box {
border: 3px dashed #ea580c;
padding: 10px;
margin-bottom: 10px;
}
.dotted-box {
border: 3px dotted #7c3aed;
padding: 10px;
}
</style>
</head>
<body>
<p class="solid-box">Solid border</p>
<p class="dashed-box">Dashed border</p>
<p class="dotted-box">Dotted border</p>
</body>
</html>ఇక్కడ మూడు paragraphs కు మూడు border styles ఇచ్చాము. solid continuous line ను, dashed చిన్న గీతల line ను, dotted చుక్కల line ను చూపిస్తుంది.
Three paragraphs appear with green solid, orange dashed, and purple dotted borders respectively.
Line-by-Line Explanation
ఈ selector card class ఉన్న element ను ఎంచుకుంటుంది. ఆ element పై కింద ఉన్న CSS declarations అమలవుతాయి.
Card యొక్క content width ను 260 pixels గా ఉంచుతుంది. ఇది border property కాదు, కానీ card పరిమాణాన్ని అర్థం చేసుకోవడానికి ఉపయోగపడుతుంది.
Text మరియు border మధ్య 20 pixels inner space ఇస్తుంది. Padding border లోపల ఉంటుంది.
ఇది ఈ lesson లోని ముఖ్యమైన declaration. Card చుట్టూ 3 pixels మందం కలిగిన solid blue border ను సృష్టిస్తుంది. ఇందులో width, style, color వరుసగా ఉన్నాయి.
Card background కు light blue రంగు ఇస్తుంది. దీని వల్ల border మరియు card ప్రాంతం స్పష్టంగా కనిపిస్తాయి.
ఈ HTML <div> element కు card class ఇచ్చాం. అందువల్ల .card selector దీనిపై border ను వర్తింపజేస్తుంది.
Learning CSS
Card లో కనిపించే heading ఇది. ఇది border ఉన్న card లోపల చూపిస్తుంది.
ఈ declaration solid-box class ఉన్న paragraph కు 3 pixels green solid border ఇస్తుంది.
ఈ declaration dashed-box class కు orange dashed border ఇస్తుంది. Dashed అంటే విడివిడిగా కనిపించే గీతలు.
ఈ declaration dotted-box class కు purple dotted border ఇస్తుంది. Dotted అంటే చుక్కల రూపంలో కనిపించే border.
Try It
Try this CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try CSS Border</title>
<style>
.notice {
padding: 16px;
border: 2px solid #dc2626;
background-color: #fef2f2;
}
</style>
</head>
<body>
<div class="notice">
<strong>Important:</strong> Practice CSS every day.
</div>
</body>
</html>Practice
Practice: పై code లో .profile element కు 3 pixels మందం కలిగిన green dashed border ఇవ్వండి.
Hint: padding కింద border: 3px dashed #16a34a; అని రాయండి.
Practice: Solution ను మార్చి dashed border స్థానంలో dotted border మరియు purple color ఉపయోగించి browser లో result ను చూడండి.
Hint: dashed స్థానంలో dotted మరియు color value ను purple రంగుకు మార్చండి.
Common Mistakes
border: 3px #2563eb; అని style ఇవ్వకుండా రాయడం.Border కనిపించడానికి
solid, dashed లేదా dotted వంటి border-style ఇవ్వండి. ఉదాహరణ: border: 3px solid #2563eb;.
boarder అని తప్పుగా రాయడం.సరైన CSS property పేరు
border. Spelling ను జాగ్రత్తగా తనిఖీ చేయండి.
HTML element లో ఉన్న class పేరు మరియు CSS selector పేరు ఒకేలా ఉన్నాయో చూడండి. ఉదాహరణకు
class="card" కోసం .card selector ఉపయోగించాలి.
Shorthand ను
border: 2px solid black; లాగా రాయండి. Declaration చివర semicolon పెట్టడం మంచి అలవాటు.
Interview Questions
CSS లో border అంటే ఏమిటి?
Answer: Border అనేది HTML element చుట్టూ కనిపించే అంచు లేదా గీత. ఇది content మరియు margin మధ్య ఉంటుంది.
Border shorthand syntax ఏమిటి?
Answer: సాధారణ syntax border: width style color;. ఉదాహరణకు border: 2px solid black;.
Border కనిపించడానికి border-style ఎందుకు అవసరం?
Answer: Border-style browser కు border ఏ రకంగా కనిపించాలో చెబుతుంది. Style ఇవ్వకపోతే చాలా సందర్భాల్లో border కనిపించదు.
solid, dashed, dotted మధ్య తేడా ఏమిటి?
Answer: solid continuous line, dashed విడివిడిగా ఉన్న గీతలు, dotted చుక్కల line ను చూపిస్తాయి.
Exam Questions
ఒక element కు 1 pixel solid black border ఇవ్వడానికి CSS declaration రాయండి.
Answer:
border: 1px solid black;
CSS box model లో border ఎక్కడ ఉంటుంది?
Answer:
Border, content మరియు padding బయట, margin లోపల ఉంటుంది.
Border యొక్క మూడు సాధారణ భాగాలు ఏమిటి?
Answer:
Border width, border style, మరియు border color.
Dashed border కోసం ఏ value ఉపయోగిస్తారు?
Answer:
border-style: dashed; లేదా shorthand లో border: 2px dashed blue; ఉపయోగించవచ్చు.
Quick Revision
- Border అనేది element చుట్టూ కనిపించే అంచు.
- సాధారణ shorthand: border: width style color;
- ఉదాహరణ: border: 3px solid blue;
- Border styles లో solid, dashed, dotted ముఖ్యమైనవి.
- Padding content మరియు border మధ్య inner space ఇస్తుంది.
- Border, content మరియు padding బయట, margin లోపల ఉంటుంది.
- Border కనిపించడానికి సరైన selector మరియు border-style ఉపయోగించాలి.
Test Your Knowledge
Take a short quiz based on this lesson.