border - HTML CSS CSS Property

HTML CSS examples for CSS Property:border

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border

Description

The border property sets the width, style, and color for all four sides of an element's border.

It is a shorthand property for setting the individual border properties:

  • border-width
  • border-style
  • border-color

The following table summarizes the border property.

Item Value
Default value: See individual properties
Applies to:All elements
Inherited: No
Animatable:Yes, See individual properties.

Syntax

The syntax of the property is as follows: 

border:      [ border-width border-style border-color ] | initial | inherit

If any property listed above is omitted, the default value will be inserted.

If border-color is not specified, for example, border:5px solid; the value of the element's color property will be used instead.

Omitting border-style will hide the border, since the default value for border-style property is none.

Property Values

The following table describes the values of border property.

ValueDescription
border-width Sets the width of the element border.
border-style Sets the line style of the element border.
border-color Sets the color of the element border.
initial Sets this property to its default value.
inherit takes the value of its parent element border property.

The example below shows the border property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS border property</title>
  <style type="text/css">
        h1 {<!--  ww  w  . j av  a  2s  .  com-->
          border: 5px solid #ff0000;
    }
    p {
      color: #00ff00;
      border: 5px solid;
    }
    </style>
 </head>
 <body>
  <h1>This is a heading.</h1>
  <p>This is a paragraph.</p>
 </body>
</html>

Related Tutorials