CSS Tutorial for Beginners Tamil - 05 - CSS BORDER PROPERTY (With Examples)

CSS Border Property (CSS Tamil Tutorial)
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
CSS Border - Individual Sides
From the examples on the previous pages, you have seen that it is possible to specify a different border for each side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
Short Method
border-style: dotted solid double dashed;
CSS Border Width
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick
border-width: 5px;
Specific Side Widths
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
CSS Border Color
The border-color property is used to set the color of the four borders.
The color can be set by:
• name - specify a color name, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
border-color: red;
Specific Side Colors
The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
CSS Rounded Borders
The border-radius property is used to add rounded borders to an element:
Example :
border-radius: 5px;

[@venirani4888]

Clockwise top right bottom left

[@sangamithiranmass3544]

Bro Amazing!!! Watching so many videos but this explaination is cleared my all doubts...

[@ponpugal]

super bro,,,,live may long,,,god bless you,,crystal clear explanation

[@growmore2458]

Thanks bro very useful

[@omprakash-qu5ld]

Please upload javascript video like html and css

[@Arunkhan77]

thanks bro

[@dr.p.velmuruganasstprofinc268]

Nice bro.
How to fix the borders at fixed size?
Example Text: Demo
In this example border only fit for the text "Demo" only. Coding please.

[@ranjethsundaram8753]

Bro javascript ku video podunga pls

[@jokeryt2.060]

bro enakku name ku madum border venum extra border venam
athuku sollave illa

[@sangeeththeking1619]

bro class namekku bathila I'd name use pannirukkalamla bro

[@KadhatharanKadhatharan-vk5uv]

Bro inline stylesheet la panna mudiyada

[@rakuwaranpirijatharsan4413]

java la video poduvenkala

[@spidey7751]

Bro javascript and php podunga

[@manimazi2334]

Bro,we can call border style by Element selector like h1,h2 like that...whether correct?

[@techtamizhan.official]

Yes bro. You can use element selector also.

[@vicky-zw7zq]

sir,what is the difference between id and class

[@techtamizhan.official]

Please watch html part 10 :)) for clear understanding

[@techtamizhan.official]

ID we should use for unique HTMl elements. Class we can use for repeating elements.

[@shivav8731]

Anna ,purpose of class is to avoid multiple code for repeating elements only na.. But here we are using multiple style for each and every class in external style.. For that can we place inline style ? Is this right?

[@techtamizhan.official]

Best practice is external style sheet