CSS Borders


CSS Borders



Hello Friends,

Today we are going to discuss about CSS border property.

The border property helps you to specify the presentation of your document or elements under document. You can make your element border visible, change its thickness, change its color and so on which we are going to discuss in this chapter.

Basically you have 3 border properties that you can change:

  • border-color
  • border-style
  • border-width

Check below example:

Code

<!DOCTYPE html>

<html>

<head>

                <title>CSS Border</title>

                <style type="text/css">

                                body{

                                                background-color: tomato;

                                                display: flex;

                                                flex-direction: column;

                                                align-items: center;

                                                justify-content: center;

                                }

                                p{

                                                font-family: "Raleway";

                                                font-size: 40px;

                                }

                                div{

                                                border-color: black;

                                                border-style: solid;

                                                border-width: 1px;

                                }

                </style>

</head>

<body>

<div>

                <p>This is a DIV 1</p>

</div>

<div>

                <p>This is a DIV 2</p>

</div>

<div>

                <p>This is a DIV 3</p>

</div>

</body>

</html>



Result





In above code we specify border-width (thickness size to 1px), border-color (black), and border-style (solid) as border style.

The border-color property:

You have five different color properties to change border color:

  • Border-color (Change the color of entire border)
  • border-bottom-color
  • border-top-color
  • border-left-color
  • border-right-color

Let’s understand them with below code:

Code

<!DOCTYPE html>

<html>

<head>

                <title>CSS Border</title>

                <style type="text/css">

                                body{

                                                background-color: tomato;

                                                display: flex;

                                                flex-direction: column;

                                                align-items: center;

                                                justify-content: center;

                                }

                                p{

                                                font-family: "Raleway";

                                                font-size: 40px;

                                }

                                .one{

                                                border-left-color: white;

                                                border-style: solid;

                                                border-width: 5px;

                                }

                                .two{

                                                border-right-color: yellow;

                                                border-style: solid;

                                                border-width: 5px;

                                }

                                .three{

                                                border-bottom-color: green;

                                                border-style: solid;

                                                border-width: 5px;

                                }

                                .four{

                                                border-top-color: blue;

                                                border-style: solid;

                                                border-width: 5px;

                                }

                </style>

</head>

<body>

<div class="one">

                <p>This is a DIV 1</p>

</div>

<div class="two">

                <p>This is a DIV 2</p>

</div>

<div class="three">

                <p>This is a DIV 3</p>

</div>

<div class="four">

                <p>This is a DIV 4</p>

</div>

</body>

</html>

Result

Result ScreenShot of Above code


The border-style property:

You can change different type of styles of border like: dashes, dotted etc. same like border color, you have four properties of style also:

  • border-style (change the style of entire border)
  • border-left-style
  • border-right-style
  • border-bottom-style
  • border-top-style

Check out the below example:

Code

<!DOCTYPE html>

<html>

<head>

                <title>CSS Border</title>

                <style type="text/css">

                                body{

                                                background-color: tomato;

                                                display: flex;

                                                flex-direction: column;

                                                align-items: center;

                                                justify-content: center;

                                }

                                p{

                                                font-family: "Raleway";

                                                font-size: 40px;

                                }

                                .one{

                                                border-left-color: white;

                                                border-left-style: solid;

                                                border-width: 5px;

                                }

                                .two{

                                                border-right-color: yellow;

                                                border-right-style: dotted;

                                                border-width: 5px;

                                }

                                .three{

                                                border-bottom-color: green;

                                                border-bottom-style: dashed;

                                                border-width: 5px;

                                }

                                .four{

                                                border-top-color: blue;

                                                border-top-style: groove;

                                                border-width: 5px;

                                }

                </style>

</head>

<body>

<div class="one">

                <p>This is a DIV 1</p>

</div>

<div class="two">

                <p>This is a DIV 2</p>

</div>

<div class="three">

                <p>This is a DIV 3</p>

</div>

<div class="four">

                <p>This is a DIV 4</p>

</div>

</body>

</html>

Result

Result ScreenShot of abve code

You have many types of style properties some of them mentioned below:

  • none − No border.
  • solid − Border with a single solid line.
  • dotted − Border with a series of dots.
  • dashed − Border with a series of short lines.
  • double − Border with two solid lines.
  • groove − Border looks as though it is carved into the page.
  • ridge − Border looks the opposite of groove.
  • inset − Border makes the box look like it is embedded in the page.
  • outset − Border makes the box look like it is coming out of the canvas.
  • hidden − Same as none, except in terms of border-conflict resolution for table elements.

The border-width property:

Same likes above border-width also have five properties.

  • boder-width (change the width of entire border)
  • border-left-width
  • border-right-width
  • border-bottom-width
  • border-top-width

Let’s check out below example:

Code

<!DOCTYPE html>

<html>

<head>

                <title>CSS Border</title>

                <style type="text/css">

                                body{

                                                background-color: tomato;

                                                display: flex;

                                                flex-direction: column;

                                                align-items: center;

                                                justify-content: center;

                                }

                                p{

                                                font-family: "Raleway";

                                                font-size: 40px;

                                }

                                .one{

                                                border-left-color: white;

                                                border-left-style: solid;

                                                border-left-width: 2px;

                                }

                                .two{

                                                border-right-color: yellow;

                                                border-right-style: dotted;

                                                border-right-width: 4px;

                                }

                                .three{

                                                border-bottom-color: green;

                                                border-bottom-style: dashed;

                                                border-bottom-width: 6px;

                                }

                                .four{

                                                border-top-color: blue;

                                                border-top-style: groove;

                                                border-top-width: 8px;

                                }

                </style>

</head>

<body>

<div class="one">

                <p>This is a DIV 1</p>

</div>

<div class="two">

                <p>This is a DIV 2</p>

</div>

<div class="three">

                <p>This is a DIV 3</p>

</div>

<div class="four">

                <p>This is a DIV 4</p>

</div>

</body>

</html>

Result

Result ScreenShot of above code


Here we have define left border width to 2px, right border width to 4px, bottom border width to 6px and top border width to 8px.

Border combiner:

You can specify border with combine all three properties together with.

{

border: width style color;

}

ex:

{

border 2px solid red;

}

border-image property:

This property allows you to insert image to your border.

border-radius property:

This is an important property of border which is use in many places to design different kinds of buttons or section. This [property helps you to rounded corner of your element.

Let’s check all above properties in one example:

Code

<!DOCTYPE html>

<html>

<head>

                <title>CSS Border</title>

                <style type="text/css">

                                body{

                                                background-color: tomato;

                                                display: flex;

                                                flex-direction: column;

                                                align-items: center;

                                                justify-content: center;

                                }

                                p{

                                                font-family: "Raleway";

                                                font-size: 40px;

                                }

                                .one{

                                                border: 2px dotted brown;

                                }

                                .two{

                                                border: 10px solid transparent;

                                                padding: 15px;

                                                border-image: url(img/mthlogo1.png) 30 round;

                                }

                                .three{

                                                border-color: green;

                                                border-style: solid;

                                                border-width: 6px;

                                                border-radius: 10px;

                                }

                </style>

</head>

<body>

<div class="one">

                <p>This is a DIV 1</p>

</div>

<br>

<div class="two">

                <p>This is a DIV 2</p>

</div>

<br>

<div class="three">

                <p>This is a DIV 3</p>

</div>

</body>

</html>

Result

Result Screanshot of above code


So it’s all about CSS border properties. Hope you like and enjoyed this tutorial. If you have any queries please leave a comment.

Thank you

4 Comments

  1. I didn't know much about this topic, so I used to randomly edit my page. But now, my concept got cleared after reading it. Informative one!

    ReplyDelete
  2. Good going ajay it's very informational 👍

    ReplyDelete
  3. Informative and make it easy to use codes...

    ReplyDelete