CSS విషయ సూచిక

CSS పరిచయం
CSS Selectors
CSS Style Sheets
CSS Text
CSS Fonts
CSS Positioning
CSS Background
CSS Links
CSS Lists
CSS Tables
CSS border
CSS Outlines
CSS Margin
CSS Padding
CSS Box Model

<< 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