Jassif Team Institution

CSS எல்லை - தனிப்பட்ட பக்கங்கள்

முந்தைய பக்கங்களில் உள்ள எடுத்துக்காட்டுகளிலிருந்து, ஒவ்வொரு பக்கத்திற்கும் வெவ்வேறு எல்லையைக் குறிப்பிட முடியும் என்பதை நீங்கள் பார்த்திருக்கிறீர்கள்.

CSS இல், ஒவ்வொரு எல்லைக்கும் (மேல், வலது, கீழ் மற்றும் இடது) குறிப்பிட பின்வரும் பண்புகள் உள்ளன:

border-top-style
border-right-style
border-bottom-style
border-left-style

எடுத்துக்காட்டு

கீழே உள்ள எடுத்துக்காட்டில் ஒவ்வொரு எல்லை பக்கத்தின் பாணியையும் அமைக்க மேலே உள்ள நான்கு பண்புகளைப் பயன்படுத்துகிறோம்:

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

முடிவு:

சுருக்கப்பண்பு

அதே முடிவை அடைய நாம் border-style சுருக்கப்பண்பையும் பயன்படுத்தலாம்.

கீழே உள்ள எடுத்துக்காட்டு மேலே உள்ள எடுத்துக்காட்டின் அதே முடிவைத் தருகிறது:

p {
  border-style: dotted solid;
}

முடிவு:

மதிப்பு விளக்கங்கள்

border-style பண்பு மூன்று மதிப்புகளைக் கொண்டிருந்தால்:

• border-style: dotted solid double;
• மேல் எல்லை புள்ளி புள்ளியானது
• வலது மற்றும் இடது எல்லைகள் திடமானவை
• கீழ் எல்லை இரட்டையானது

border-style பண்பு இரண்டு மதிப்புகளைக் கொண்டிருந்தால்:

• border-style: dotted solid;
• மேல் மற்றும் கீழ் எல்லைகள் புள்ளி புள்ளியானவை
• வலது மற்றும் இடது எல்லைகள் திடமானவை

border-style பண்பு ஒரு மதிப்பைக் கொண்டிருந்தால்:

• border-style: dotted;
• நான்கு எல்லைகளும் புள்ளி புள்ளியானவை

எடுத்துக்காட்டுகள்

/* Four values */
p {
  border-style: dotted solid double dashed;
}

/* Three values */
p {
  border-style: dotted solid double;
}

/* Two values */
p {
  border-style: dotted solid;
}

/* One value */
p {
  border-style: dotted;
}

பயிற்சி

p {
  border--style: dotted;
  border--style: solid;
}