[Tamil] Border Using CSS In Tamil

CSS Border

css border property-யை பயன்படுத்தி ஒரு element-க்கு border-யை கொடுக்க முடியும்.
css border-யை பற்றி பார்ப்போம்:
1)border-style
2)border-color
3)border-width

border style:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .design{

            border-style: dotted;

        }

    </style>

</head>

<body>

<h1>border கொடுப்பதற்கு  முன்பு,</h1>

<h3>Techysaw</h3>



<h1>border கொடுத்த பிறகு,</h1>

<h3 class="design">Techysaw</h3>

</body>

</html>

Output:

விளக்கம்:-
design என்பது ஒரு class selector ஆகும். இந்த selector உள்ளே border-style:dotted; என்கிற property மற்றும் value ஆனது கொடுக்கப்பட்டுள்ளது.
இந்த design என்கிற class selector-யை எந்த element-ல் பயன்படுத்துகின்றமோ அந்த element-யை சுற்றி border ஆனது கொடுக்கப்படும்.இந்த program-ல் h3 element-ல் design என்கிற class selector பயன்படுத்தப்பட்டுள்ளது.அதனால் h3 element-ன் உள்ளே இருக்கின்ற techysaw என்கிற content சுற்றி border-ஆனது கொடுக்கப்படுகிறது.

border width:


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .first{

            border-style: dotted;

            border-width: thin;

        }

        .second{

            border-style: solid;

            border-width: thick;

        }

        .third{

            border-style: dashed;

            border-width: medium;

        }

        .four{

            border-style: dotted;

            border-width: 5px;

        }

    </style>

</head>

<body>

<h3 class="first">Techysaw-1</h3>

<h3 class="second">Techysaw-2</h3>

<h3 class="third">Techysaw-3</h3>

<h3 class="four">Techysaw-4</h3>

</body>

</html>

Output:

border specific width:


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .first{

            border-style: dotted;

            border-width: 7px 7px;

        }

        .second{

            border-style: solid;

            border-width: 8px 10px 12px 15px;

        }

        

    </style>

</head>

<body>

<h3 class="first">Techysaw-1</h3>

<h3 class="second">Techysaw-2</h3>

</body>

</html>

Output:

border specific color:


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .first{

            border-style: dotted;

            border-color: blue;

        }

        .second{

            border-style: solid;

            border-color: green red brown yellow;

        }

        

    </style>

</head>

<body>

<h3 class="first">Techysaw-1</h3>

<h3 class="second">Techysaw-2</h3>

</body>

</html>

Output:

Individual border sides


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>


    <style>

        .first{

            border-right-style: dotted;

            border-top-style: dashed;

            border-left-style: solid;

            border-bottom-style: dotted;

        }

        

    </style>


</head>

<body>

<h3 class="first">Techysaw-1</h3>

</body>

</html>