In this article we are going to explain how to  set border-color of html element or how to set border-style of html element by using CSS code with example.


The Border style property is used to set the border of html element which you want to display on the web page.

There are some border style values which are used with border-style property to define a border.

border-style: is used to set the border type like dotted or solid;

border-width: is used to set the border width;

border-color: is used to set the border color;       

border-radius: is used to set the border rounded corners;

Let’s see a simple example of border style property:

 <!DOCTYPE html>
 <title>border style</title>
    <div id="my-welcome-message">
        <h2>Welcome to my site</h2>
        <p>Hello, welcome to my website.</p>
        #my-welcome-message {
            z-index: 500;
            position: fixed;
            width: 36%;
            left: 30%;
            top: 20%;
            padding: 20px 2%;
            font-family: Calibri, Arial, sans-serif;
            background: #FFF;
            border-style: solid;
            border-width: 5px;
            border-color: red;           
            border-radius: 10px
        }            </style>


 how to set border of html element using css

 I hope this article will help to you after reading.

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like