<< Previous Next >>

border property

  • border-style
  • border-width
  • border-color
Border యొక్క ఈ మూడు property లను ఒకే లైన్ లో క్రింది విధంగా వ్రాస్తారు. ఈ విధంగా వ్రాసేటప్పుడు ఈ property ల యొక్క క్రమాన్ని గమనించండి మరియు పాటించండి. ఇది సరైన పద్దతి.

"border : width style color;" దీన్నే border - shorthand property అంటారు.అనగా విడివిడిగా కాకుండా ఒకే లైన్ లో వ్రాయడం (క్రింది ఉదాహరణ లో ఇప్పడు మీరు చూస్తున్నట్లుగా కాకుండా అని అర్థం).

Border Shorthand Property Example

Click for
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{border-width:2px;
border-style:dotted;
border-color:#FF0000;}
</style>
</head>
<body>
<p>"Experience is simply the name
we give our mistakes"</p>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

"Experience is simply the name
we give our mistakes"


Border అనేది తక్కువలో తక్కువగా రెండు property లను తప్పక కలిగి ఉండాలి ఇందులో "style" అనేది తప్పనిసరి.ముందుగా ఈ style property కి గల విలువలను గురించి తెలుసుకుందాం.

border-style values:

  border-style: dotted;

  border-style: dashed;

  border-style: solid;

  border-style: double;

  border-style: groove;

  border-style: ridge;

  border-style: inset;

  border-style: outset;

Border - Individual sides

క్రింది ఉదాహరణలో నాలుగు వైపులా నాలుగు వేర్వేరు రకాల border లను apply చేయడం జరిగింది.
Sample webpage
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{border-top: dotted;
border-right: solid;
border-bottom: dashed;
border-left:double;
border-color:#FF0000;}
</style>
</head>
<body>
<p>We can specify different borders
for individual sides</p>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

We can specify different borders
for individual sides


Border Width

Border యొక్క వెడల్పును నిర్ణయించేందుకు border-width అనే property ని ఉపయోగిస్తారు. width ని thin medium thick లేదా pixels లలో వివరించవచ్చును. ముందుగా border లను నిర్ణయించిన తరువాత మాత్రమే వాటి width ని నిర్ణయించవచ్చును. అనగా "border-width" property ని వాడాలి అనుకున్నప్పుడు "border-style" property ని ముందుగా నిర్ణయించవలసి ఉంటుంది. ఇంకోలా చెప్పాలంటే "border-width" property ఒంటరిగా పనిచెయ్యదు అని అర్థం. [length units : em, ex, %, px, cm, mm, in, pt, pc ఇవి మనం వాడే browser version లపై ఆధారపడి ఉంటాయి.అనగా ఈ unit లు browser లను బట్టి మారుతుంటాయి (సరిగ్గా పనిచెయ్యవు అంటే అన్ని browser లలో ఒకే విధమైన ఫలితాన్ని ఇవ్వవు అని అర్థం).]

Click చేసి మార్పుని గమనించండి.

Remove
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{border-width:2px;
border-style:dotted;}
</style>
</head>
<body>
<p>The 'border-width' property does
not work if it is used alone.</p>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

The 'border-width' property does
not work if it is used alone.


Border Color

border-color అనే property ద్వారా border యొక్క కలర్ ను మార్చవచ్చును. ఇందుకుగానూ ముందుగా border యొక్క style ను నిర్ణయించవలసి ఉంటుంది. అనగా border-style అనే property ని ఉపయోగించాకే border-color అనే property పనిచేస్తుంది.

Click చేసి మార్పుని గమనించండి.

Remove
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{border-style:dashed;
border-color:red;}
</style>
</head>
<body>
<p>The 'border-color' property does
not work if it is used alone.</p>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

The 'border-color' property does
not work if it is used alone.


తదుపరి CSS Outlines Property గురించి...

<< Previous Next >>
Back to Top