CSS வட்டமான எல்லைகள்
border-radius பண்பு ஒரு உறுப்புக்கு வட்டமான எல்லைகளைச் சேர்க்கப் பயன்படுகிறது:
எடுத்துக்காட்டு
p {
border: 2px solid red;
border-radius: 5px;
}மேலும் எடுத்துக்காட்டுகள்
அனைத்து மேல் எல்லை பண்புகளும் ஒரே அறிவிப்பில்
மேல் எல்லைக்கான அனைத்து பண்புகளையும் ஒரே அறிவிப்பில் அமைக்கும் சுருக்கப்பண்பை இந்த எடுத்துக்காட்டு நிரூபிக்கிறது.
கீழ் எல்லையின் பாணியை அமைக்கவும்
கீழ் எல்லையின் பாணியை எவ்வாறு அமைப்பது என்பதை இந்த எடுத்துக்காட்டு நிரூபிக்கிறது.
இடது எல்லையின் அகலத்தை அமைக்கவும்
இடது எல்லையின் அகலத்தை எவ்வாறு அமைப்பது என்பதை இந்த எடுத்துக்காட்டு நிரூபிக்கிறது.
நான்கு எல்லைகளின் நிறத்தை அமைக்கவும்
நான்கு எல்லைகளின் நிறத்தை எவ்வாறு அமைப்பது என்பதை இந்த எடுத்துக்காட்டு நிரூபிக்கிறது. இதற்கு ஒன்று முதல் நான்கு வரை நிறங்கள் இருக்கலாம்.
வலது எல்லையின் நிறத்தை அமைக்கவும்
வலது எல்லையின் நிறத்தை எவ்வாறு அமைப்பது என்பதை இந்த எடுத்துக்காட்டு நிரூபிக்கிறது.
பயிற்சி
வட்டமான மூலைகளைக் கொண்ட ஒரு உறுப்பை உருவாக்க சரியான பண்பு மற்றும் மதிப்பை இழுத்து விடவும்.
p {
border: 2px solid red;
: ;
}அனைத்து CSS எல்லை பண்புகள்
| பண்பு | விளக்கம் |
|---|---|
border |
அனைத்து எல்லை பண்புகளையும் ஒரே அறிவிப்பில் அமைக்கிறது |
border-bottom |
அனைத்து கீழ் எல்லை பண்புகளையும் ஒரே அறிவிப்பில் அமைக்கிறது |
border-bottom-color |
கீழ் எல்லையின் நிறத்தை அமைக்கிறது |
border-bottom-style |
கீழ் எல்லையின் பாணியை அமைக்கிறது |
border-bottom-width |
கீழ் எல்லையின் அகலத்தை அமைக்கிறது |
border-color |
நான்கு எல்லைகளின் நிறத்தை அமைக்கிறது |
border-left |
அனைத்து இடது எல்லை பண்புகளையும் ஒரே அறிவிப்பில் அமைக்கிறது |
border-left-color |
இடது எல்லையின் நிறத்தை அமைக்கிறது |
border-left-style |
இடது எல்லையின் பாணியை அமைக்கிறது |
border-left-width |
இடது எல்லையின் அகலத்தை அமைக்கிறது |
border-radius |
வட்டமான மூலைகளுக்கான அனைத்து border-*-radius பண்புகளையும் அமைக்கிறது |
border-right |
அனைத்து வலது எல்லை பண்புகளையும் ஒரே அறிவிப்பில் அமைக்கிறது |
border-right-color |
வலது எல்லையின் நிறத்தை அமைக்கிறது |
border-right-style |
வலது எல்லையின் பாணியை அமைக்கிறது |
border-right-width |
வலது எல்லையின் அகலத்தை அமைக்கிறது |
border-style |
நான்கு எல்லைகளின் பாணியை அமைக்கிறது |
border-top |
அனைத்து மேல் எல்லை பண்புகளையும் ஒரே அறிவிப்பில் அமைக்கிறது |
border-top-color |
மேல் எல்லையின் நிறத்தை அமைக்கிறது |
border-top-style |
மேல் எல்லையின் பாணியை அமைக்கிறது |
border-top-width |
மேல் எல்லையின் அகலத்தை அமைக்கிறது |
border-width |
நான்கு எல்லைகளின் அகலத்தை அமைக்கிறது |
கற்றல் உதவிக்குறிப்பு:
border-radius பண்பு மிகவும் பயனுள்ளதாக இருக்கும் போது நீங்கள் நவீன மற்றும் கண்ணுக்கு இனிமையான பயனர் இடைமுகங்களை உருவாக்க விரும்பும் போது. இது பொத்தான்கள், கார்டுகள் மற்றும் பிற UI உறுப்புகளுக்கு சிறந்தது.