Skip to content
Related Articles

Related Articles

Improve Article
CSS | border-top-color Property
  • Last Updated : 12 Apr, 2021

border-color property is used to color all border of container with the same color. 
border-top-color property provide option to fill different color from parent border-color to top border of the container.
Note: Take care of order while writing the statement in CSS, i.e CSS will take last value of the property, So, for expected output always write border-top-color below border-color.
Syntax:
 

border-top-color: color|transparent|initial|inherit; 

Property Values:
color: It sets the color of the Element’s top-border. 
 

  • Syntax:
     
border-top-color: color
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | border-top-color Property
    </title>
    <style>
        h1 {
            color: green;
        }
         
        h3 {
            border: 2px solid green;
            border-top-color: red;
            width: 50%;
        }
    </style>
</head>
 
<body>
    <center>
 
        <h1>GeeksForGeeks</h1>
        <h2>border-top-color:color;</h2>
        <h3>GeeksForGeeks</h3>
         
        <!-- Sets the color-->
        <p style="border-style:dotted;
                border-top-color:coral;
                width:70%;">
        It is a computer science portal for geeks.</p>
  
 
</body>
 
</html>
  • Output: 
     

  •  

Transparent: It specify the transparent value of top-border.
 

  • Syntax:
     
border-top-color:transparent;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | border-top-color Property
    </title>
    <style>
        h1 {
            color: green;
        }
         
        h3 {
            border: 2px solid green;
            border-top-color: transparent;
            width: 50%;
        }
    </style>
</head>
 
<body>
    <center>
 
        <h1>GeeksForGeeks</h1>
        <h2>border-top-color:transparent</h2>
        <h3>GeeksForGeeks</h3>
 
        <!-- Sets the color to transparent-->
        <p style="border-style:dotted;
                border-top-color:transparent;
                width:70%;">
            It is a computer science portal for geeks.</p>
 
 
</body>
 
</html>
  • Output: 
     



initial: It sets the Property to its default value.
 

  • Syntax:
     
border-top-color:initial;
  • Example:
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | border-top-color Property
    </title>
    <style>
        h1 {
            color: green;
        }
         
        h3 {
            border: 2px solid green;
            border-top-color: initial;
            width: 50%;
        }
    </style>
</head>
 
<body>
    <center>
 
        <h1>GeeksForGeeks</h1>
        <h2>border-top-color:initial;</h2>
        <h3>GeeksForGeeks</h3>
 
        <!-- Sets the color to its default value-->
        <p style="border-style:dotted;
                border-top-color:initial;
                width:70%;">
            It is a computer science portal for geeks.</p>
 
 
</body>
 
</html>
  • Output: 
     

Supported Browsers: The browser supported by css border-top-color property are listed below: 
 

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

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :