CSS border-top (Set/Change Top Border)

The CSS border-top property is used when we need to set the width, style, and color of the top border of an element, at once. For example:

HTML with CSS Code
<!DOCTYPE html>
      h2 {border-top: 4px solid green;}
      p {border-top: 8px dotted coral;}
      div {border-top: 8px dashed chocolate;}

   <h2>The border-top Property</h2>
   <p>This is para one.</p>
   <div>This is div one.</div>


The border-top Property

This is para one.

This is div one.

The border-top is basically the shorthand of following properties:

  1. border-top-width
  2. border-top-style
  3. border-top-color

Therefore, in the following code:

p {border-top: 8px dotted coral;}

8px is the width, dotted is the style, and coral is the color, of top border.

Note - The default value of:

  • border-top-width is medium
  • border-top-style is none
  • border-top-color is the color of text

CSS border-top Syntax

The syntax of border-top property in CSS, is:

border-top: width style color|initial|inherit;

The third value, may be any of the following three:

  • color - to apply particular color
  • initial - applies the default color value
  • inherit - applies the color of its parent element

CSS Online Test

« Previous Tutorial Next Tutorial »

Follow/Like Us on Facebook

Subscribe Us on YouTube