CSS - Borders


CSS - Borders

  • Border is a box around the element or a container.
  • In CSS, border properties allows us to define the style, width, and color for an element's border.

Types of Border Property : 

  • There are three different types of properties in CSS border they are :
    • Border-width.
    • Border-style.
    • Border-color.

Border Width :

  • The border-width property defines the width of the four borders around an element.
  • The width can be set in a specific size (px, pt, cm, em, etc).
  • In CSS, We can also use one of the three pre-defined values : thin, medium, or thick.

Sample Code :

<!DOCTYPE html>
<html>
    <head>
    </head>
        <body>
            <p style="border-width:thin; border-style:solid;">
                Welcome To WikiTechy.com
            </p>
            <br />
            <p style="border-width:thick; border-style:solid;">
                Where You Can Learn All The Technologies.
            </p>
            <br />
            <p style="border-width:5px; border-style:solid;">
                Best E-Leaning Website In The World.
            </p>
        </body>
</html>

Code Explanation :


    In CSS, applying the border width : thin property for <p> tag states that the width is thin and style of the border is solid. Note : Using Inline CSS we are applying a specific styles to a particular element.

    Similarly, applying border width : thick for an element displays thicker and stronger around it than the first border. Note : We can also specify different styles like dotted, dashed to our border. Which we will learn in the upcoming chapter.

    Border width for an element can be specified size (in px, pt, cm, em, etc).Here, we have given 3 pixels (3 px) for the paragraph element (<p>).

Output :


    Here, the paragraph text “Welcome To wikitechy.com” has the thin border around it which is displayed in the browser window.

    The Paragraph “You Can Learn All the Technologies” has the  thick border width since we specified border-width: thick in CSS.

    Similarly, border around the text “Best E-Leaning Website in the World.” is specified in pixels a shown.