CSS Borders

border என்பது shorthand css property. இது ஒரு html element-ன் border-ஐ set செய்வதற்காக பயன்படுதகூடியது.

ஒரு border-ன் size, style,color மற்றும் radius போன்றவற்றை குறிப்பிட border property-கள் கீழ்க்கண்டவாறு பயன்படுத்தபடுகிறது.

border-style
border-width
border-color
border-radius

CSS border-style

எவ்வகையான border display செய்யவேண்டும் என்பதை குறிப்பிட border-style property பயன்படுத்தப்படுகிறது.

கீழ்க்கண்ட சில border style-களை நாம் பயன்படுத்துகிறோம்

Property value	Description
none	used for no border.
dotted	used for dotted border.
dashed	used for dashed border.
solid	used for solid border.
inset	used for 3d inset border.
outset	used for 3d outset border.
double	used for two borders with the same border-width.
groove	used for 3d grooved border. இதன் effect, border-color value-ஐ பொருத்து உருவாக்கபடுகிறது.
ridge	used for 3d ridged border.

Example

Try this code

.none {border-style: none;margin:10px;}  
.dotted {border-style: dotted;margin:10px;}  
.dashed {border-style: dashed;margin:10px;}  
.solid {border-style: solid;margin:10px;}
.inset {border-style: inset;margin:10px;} 
.outset {border-style: outset;margin:10px;} 
.double {border-style: double;margin:10px;}  
.groove {border-style: groove;margin:10px;}  
.ridge {border-style: ridge;margin:10px;}  
.hidden {border-style: hidden;margin:10px;}

Example

Try this code

<div class="none">your content with No border.</div>  
<div class="dotted">your content with dotted border.</div>  
<div class="dashed">your content with dashed border.</div>  
<div class="solid">your content with solid border.</div>  
<div class="double">your content with double border.</div>  
<div class="groove">your content with groove border.</div>  
<div class="ridge">your content with ridge border.</div>  
<div class="inset">your content with  inset border.</div>  
<div class="outset">your content with outset border.</div>  
<div class="hidden">your content with hidden border.</div>

Output:

your content with No border.

your content with dotted border.

your content with dashed border.

your content with solid border.

your content with double border.

your content with groove border.

your content with ridge border.

your content with inset border.

your content with outset border.

CSS border-width

border-width property border-இன் width குறிபட பயன்படுத்தபடுகிறது. அதாவது border size. இதற்கு pixel values-ஐ பயன்படுத்தலாம் அல்லது ஏற்கனவே define செய்யப்பட்ட values-களை பயன்படுத்திகொள்ளலாம், அதாவது thin, medium or thick என border- இன் width-ஐ set செய்து கொள்ளலாம்.

Note: The border-width property-ஐ மட்டும் தனியாக பயன்படுத்த இயலாது. ஏனெனில் "border-style" இருந்தால் தான் border-width வேலை செயும். otherwise it will not work.

Example

Try this code

.b1 {  
border-style: solid;  
border-width: 5px; 
margin:10px;
}  
.b2 {  
border-style: solid;  
border-width: medium;
margin:10px;
}  
.b3 {  
border-style: solid;  
border-width: 1px;
margin:10px;
}

Example

Try this code

<div class="b1">Write your text here.</div>  
<div class="b2">Write your text here.</div>  
<div class="b3">Write your text here.</div>

Output:

Write your text here.

CSS border-color

3 முறைகளில் நாம் border-color apply செய்யலாம் அவை பின்வருமாறு.

Name: color name-ஐ குறிப்பிடலாம். For example: "red".
RGB: RGB value-ஐ குறிப்பிடலாம். For example: "rgb(255,0,0)".
Hex: hex value-ஐ குறிப்பிடலாம். For example: "#ff0000".
"transparent" color name-ஐ பயன்படுத்தினால் background-color-க்கு ஏற்றவாறு border-ஐ set செய்துகொள்ளும். ஒரு வேலை border color கொடுக்கவில்லை எனில் it is inherited from the color property of the element.

Note: The border-color property-ஐ மட்டும் தனியாக பயன்படுத்த இயலாது. ஏனெனில் "border-style" இருந்தால் தான் border-color வேலை செயும். otherwise it will not work.

Example

Try this code

.c1 {  
border-style: solid;  
border-color: red;
margin:10px;
}  
.c2 {  
border-style: solid;  
border-color: #98bf21;
margin:10px;
}

Example

Try this code

<div class="c1">This is a solid red border</div>  
<div class="c2">This is a solid green border</div>

Output:

This is a solid red border

This is a solid green border

Shorthand CSS Border

மேற்கண்டவாறு தனி தனியாக பயன்படுத்தாமல் shorthand property(border)-ஐ பயன்படுத்தி எளிமையாக border-ஐ apply செய்யலாம்.

Example

Try this code

.s1{
border: 1px solid green;
margin:10px;
}
.s2{
border: 2px dotted #000;
margin:10px;
}
.s3{
border: 1px double #333;
margin:10px;
}

Example

Try this code

<div class="s1">your content with dotted border.</div>  
<div class="s2">your content with dashed border.</div>  
<div class="s3">your content with solid border.</div>

Output:

your content with dotted border.

your content with dashed border.

your content with solid border.

Comments

JANANI 27th October,2020 12:03 pm

WELL EASY TO LEARN