Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

CSS border Property

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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"

Default Value : Its default value is initial.

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: 

html




<!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
  • Edge 12
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Apple Safari 1.0

My Personal Notes arrow_drop_up
Last Updated : 01 Aug, 2022
Like Article
Save Article
Similar Reads
Related Tutorials