Outline vs Border

Outline vs Border అంటే ఏమిటి?

CSSలో border మరియు outline రెండూ ఒక element చుట్టూ కనిపించే గీతలను సృష్టిస్తాయి. కానీ అవి browserలో వేర్వేరు విధంగా పనిచేస్తాయి.

Border

border element యొక్క content మరియు padding చుట్టూ ఉంటుంది. ఇది box modelలో భాగం. అందువల్ల borderకు width ఇచ్చినప్పుడు element యొక్క మొత్తం పరిమాణంపై ప్రభావం పడవచ్చు.

Outline

outline borderకు బయట కనిపిస్తుంది. ఇది box modelలో భాగం కాదు. అందువల్ల outline కోసం తీసుకున్న స్థలం element యొక్క width లేదా heightలో కలవదు. Outline సాధారణంగా keyboard focusలో ఉన్న elementను చూపించడానికి ఉపయోగిస్తారు.

ముఖ్యమైన తేడాలు

Border element పరిమాణాన్ని ప్రభావితం చేయవచ్చు; outline element పరిమాణాన్ని ప్రభావితం చేయదు.
Border elementకి దగ్గరగా ఉంటుంది; outline borderకు బయట ఉంటుంది.
Borderకు ప్రతి వైపు వేర్వేరు style ఇవ్వవచ్చు, ఉదాహరణకు border-left. Outline సాధారణంగా ఒకే చుట్టుకొలతగా కనిపిస్తుంది.
Outlineలో outline-offset ఉపయోగించి outline మరియు border మధ్య ఖాళీని మార్చవచ్చు.

Border syntax

.card {
  border: 3px solid #2563eb;
}

Outline syntax

.card {
  outline: 3px dashed #f97316;
  outline-offset: 6px;
}

Borderకు సాధారణ shorthandలో width, style, color క్రమంగా రాస్తారు. Outlineకూ ఇదే విధమైన shorthand ఉపయోగించవచ్చు. ఉదాహరణకు outline: 3px dashed orange;.

ఎప్పుడు ఏది ఉపయోగించాలి?

Element యొక్క నిజమైన అంచు లేదా box design కోసం border ఉపయోగించండి.
Focus indicator, temporary highlight లేదా box బయట ప్రత్యేకంగా గుర్తించడానికి outline ఉపయోగించండి.
Accessibility కోసం keyboardతో focus అయ్యే elementకు outline తొలగించకుండా, అవసరమైతే దాన్ని స్పష్టంగా style చేయండి.

Simple Explanation

సులభంగా గుర్తుంచుకోవాలంటే, border boxలో భాగం. outline box బయట కనిపించే అదనపు గీత.

ఒక cardకు border ఇస్తే cardకు నిజమైన అంచు ఏర్పడుతుంది. అదే cardకు outline ఇస్తే card పరిమాణం మారకుండా బయట మరో గీత కనిపిస్తుంది. outline-offsetతో ఆ గీతను ఇంకా బయటకు జరపవచ్చు.

Real-Life Example

ఒక notebookలో ప్రతి page చుట్టూ ఉన్న printed lineను borderగా ఊహించండి. అది page designలో భాగం. ఆ pageను గుర్తించడానికి బయట నుంచి వేసే marker lineను outlineగా ఊహించవచ్చు. Marker line page పరిమాణాన్ని మార్చదు.

Code Examples

Border మరియు Outline తేడా

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Outline vs Border</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 30px;
      background-color: #f8fafc;
    }

    .card {
      width: 260px;
      padding: 20px;
      border: 4px solid #2563eb;
      outline: 4px dashed #f97316;
      outline-offset: 8px;
      background-color: white;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>Product Card</h2>
    <p>The blue line is a border.</p>
    <p>The orange dashed line is an outline.</p>
  </div>
</body>
</html>

ఈ ఉదాహరణలో cardకు నీలం రంగు border మరియు orange రంగు dashed outline ఇచ్చాం. Border cardకు దగ్గరగా ఉంటుంది. Outline borderకు బయట ఉంటుంది. outline-offset: 8px వల్ల border మరియు outline మధ్య 8px ఖాళీ కనిపిస్తుంది.

తెలుపు background ఉన్న Product Card కనిపిస్తుంది. Card చుట్టూ 4px solid blue border ఉంటుంది. దాని బయట 8px ఖాళీ తర్వాత 4px dashed orange outline కనిపిస్తుంది.

Line-by-Line Explanation

.card {
card class ఉన్న elementకు CSS styles ప్రారంభమవుతున్నాయని ఈ selector చెబుతుంది.

width: 260px;
Card యొక్క content widthను 260pxగా ఉంచుతుంది. ఇది border మరియు padding కాకుండా content భాగానికి సంబంధించిన width.

padding: 20px;
Content మరియు border మధ్య 20px లోపలి ఖాళీని ఇస్తుంది.

border: 4px solid #2563eb;
Card చుట్టూ 4px మందం ఉన్న solid blue borderను సృష్టిస్తుంది. ఇది element boxలో భాగంగా పనిచేస్తుంది.

outline: 4px dashed #f97316;
Borderకు బయట 4px మందం ఉన్న dashed orange outlineను సృష్టిస్తుంది. ఇది box modelలో భాగం కాదు.

outline-offset: 8px;
Border మరియు outline మధ్య 8px ఖాళీని సృష్టిస్తుంది. విలువ పెంచితే outline ఇంకా బయటకు వెళ్తుంది.

background-color: white;
Card లోపలి backgroundను తెలుపు రంగులో చూపిస్తుంది. దీని వల్ల card text స్పష్టంగా కనిపిస్తుంది.

ఈ HTML elementకు card classను కలిపారు. అందువల్ల పైన ఉన్న .card CSS rules దీనిపై వర్తిస్తాయి.

The blue line is a border.

Blue line border అని browserలో కనిపించే paragraph textను చూపిస్తుంది.

The orange dashed line is an outline.

Orange dashed line outline అని browserలో కనిపించే paragraph textను చూపిస్తుంది.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Outline and Border</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 30px;
    }

    .notice {
      width: 260px;
      padding: 16px;
      border: 3px solid green;
      outline: 3px dashed orange;
      outline-offset: 5px;
      background-color: #fff7ed;
    }
  </style>
</head>
<body>
  <div class="notice">
    <h2>Notice</h2>
    <p>Change the border and outline values.</p>
  </div>
</body>
</html>

Try It Yourself »

Practice

Practice: పైన ఉన్న codeలో .profile elementకు borderను 5px solid blueగా మార్చండి. Outlineను 3px dotted redగా మార్చండి. తర్వాత outline-offsetను 8pxగా మార్చి browserలో ఫలితాన్ని చూడండి.

Hint: border, outline, outline-offset declarationsలోని valuesను మార్చండి. ఉదాహరణకు outline: 3px dotted #dc2626;.

Common Mistakes

విద్యార్థి outlineను borderలా box sizeలో భాగంగా భావిస్తాడు.
Outline box modelలో భాగం కాదు. Outline ఇచ్చినా element యొక్క layout size సాధారణంగా మారదు.

outline-offsetను border మధ్యలో ఖాళీ కోసం ఉపయోగించకుండా, marginతో కలిపి గందరగోళం చేస్తాడు.
outline-offset border మరియు outline మధ్య దూరాన్ని మాత్రమే మార్చుతుంది. ఇది ఇతర elements మధ్య layout spacingను సృష్టించదు.

outline: 3 solid red; అని outline style ఇవ్వకుండా రాస్తాడు.
Outline shorthandలో style తప్పనిసరిగా ఇవ్వాలి. సరైన రూపం outline: 3px solid red;.

Focus కనిపించకూడదని outline: none;ను ప్రతి elementకు ఉపయోగిస్తాడు.
Keyboard usersకు focus తెలుసుకోవడానికి outline ఉపయోగపడుతుంది. దాన్ని తీసివేస్తే స్పష్టమైన alternative focus style ఇవ్వాలి.

Interview Questions

CSSలో border మరియు outline మధ్య ప్రధాన తేడా ఏమిటి?

Answer: Border element boxలో భాగం మరియు element పరిమాణంపై ప్రభావం చూపవచ్చు. Outline borderకు బయట ఉంటుంది మరియు box modelలో భాగం కాదు.

outline-offset property ఎందుకు ఉపయోగిస్తారు?

Answer: Border మరియు outline మధ్య ఖాళీని మార్చడానికి outline-offset ఉపయోగిస్తారు.

Borderకు మరియు outlineకు ఒకే shorthand syntax ఉందా?

Answer: చాలా వరకు ఒకే విధంగా width, style, color valuesను రాయవచ్చు. ఉదాహరణకు border: 2px solid blue; మరియు outline: 2px solid blue;.

Outline సాధారణంగా ఎక్కడ ఉపయోగపడుతుంది?

Answer: Focused form controls, keyboard navigation indicator మరియు temporary highlighting కోసం outline ఉపయోగపడుతుంది.

Exam Questions

క్రింది CSSలో element boxకు నిజమైన అంచును ఏ property సృష్టిస్తుంది? border లేదా outline?

Answer:

సరైన సమాధానం: border. Border box modelలో భాగం.

outline: 2px dashed orange; declarationలో 2px, dashed, orange ఏమి సూచిస్తాయి?

Answer:

2px outline width, dashed outline style, orange outline colorను సూచిస్తాయి.

Outline element యొక్క widthను సాధారణంగా మారుస్తుందా?

Answer:

లేదు. Outline box modelలో భాగం కానందున element యొక్క layout width లేదా heightను సాధారణంగా మార్చదు.

Border మరియు outline మధ్య 10px ఖాళీ కోసం ఏ declaration రాయాలి?

Answer:

outline-offset: 10px;

Quick Revision

Border element యొక్క boxలో భాగం; outline boxకు బయట ఉంటుంది.
Border element పరిమాణం మరియు layoutపై ప్రభావం చూపవచ్చు.
Outline box modelలో భాగం కాదు.
Outlineను borderకు బయట చూపించవచ్చు.
outline-offset border మరియు outline మధ్య దూరాన్ని మార్చుతుంది.
Focus indicator కోసం outlineను జాగ్రత్తగా ఉపయోగించండి.

Outline vs Border