CSS border Property

Last Updated : 07 Aug, 2019

The border property in CSS is used to style the border of an element. This property is a combination of three other properties border-width, border-style, and border-color as can be used as a shorthand notation for these three properties. It sets or returns the border-width, border-style, border-color Properties.

Syntax:

border = "width style color|initial|inherit"

Property Values:

width: This value specifies the weight or the width of the border.
style: This value specifies a style for the border, that is whether the border will be dotted, dashed, solid etc.
color: This value specifies the color of the border.

Below code illustrate the border property in CSS:
Example:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        #gfg {
            border: 4px solid blue;
            width: 60%;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksForGeeks</h1>
  
        <h2>DOM Style border Property</h2>
  
        <!-- Element whose border will be styled -->
        <div id="gfg">
            GeeksForGeeks. 
            It is a computer science portal for geeks.
        </div>
    </center>
</body>
  
</html>               

Output:

Supported Browsers: The browser supported by CSS border property are listed below:

Google Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Opera 3.5
Apple Safari 1.0

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.

My Personal Notes

Jun	JUL	Aug
	31
2020	2021	2022

Related Articles

CSS border Property