CSS Border

The CSS border is a shorthand property used to set the border on an element. This border property is used to specify the style, color and size of the border of an element.

Understanding different border styles

The border-style property sets the style of a box's border such as solid, dotted, etc. It is a shorthand property for setting the line style for all four sides of the element's border.

The border-style property can have the following values: none, hidden, solid, dashed, dotted, double, inset, outset, groove, and ridge.

Input:-

Index.html

 

<body>

  <h1>This is a heading element</h1>     

   <p>This is a paragraph element</p>

</body>

 

Style.css

 

h1{

  border-style: dotted;

}

p{

  border-style: ridge;

}

Test Yourself

Output:-

Note: We must specify a border style in order to make the border appear around an element because the default border style is none. Whereas, the default border width or thickness is medium, and the default border color is the same as the text color.

Setting the Border Width

The border-width property specifies the width of the border area. It is a shorthand property for setting the thickness of all four sides of an element's border simultaneously.

The border width can be specified using length values such as px, em, rem, etc. Additionally, three keywords can be used: thin, medium, and thick. Percentage values are not allowed.

Input:-

Index.html

 

<body>

   <p>This is a paragraph element</p>

</body>

 

Style.css

 

p{

  border-style: dotted;

  border-width: 10px;

}

Test Yourself

Output:-

Specifying the Border Color

This property determines the color of the border area. It is also a shorthand property for setting the color of all four sides of an element's border.

The CSS border-width or border-color property does not function independently. The border-style property must be used to set the border style first.

Input:-

Index.html

 

<body>

   <p>This is a paragraph element</p>

</body>

 

Style.css

 

p{

  border-style: dotted;

  border-width: 10px;

  border-color: #ff0000;

}

Test Yourself

Output:-

The Border Shorthand Property

The border property is a shorthand property that combines one or more of the individual border properties: border-width, border-style, and border-color, into a single rule.

If an individual border property is not specified when using the border shorthand property, the default value for that property will be used, if any.

For example, if the border-color property is missing or not specified when setting the border, the element's color property will be used as the value for the border color.

Input:-

Index.html

 

<body>

   <p>This is a paragraph element</p>

</body>

 

Style.css

 

p{

  border: 5px solid #ff0000;

}

Test Yourself

Output:-

Help Us to Improve our content

Let's Talk

Test your CSS skills.

EXERCISE - 1

Set rounded borders to the <p> by using border property.

<p>Learn, Build & Test Your Codes.</p>

<style>

      p{

        border: 3px solid blue;

        border-radius: 5px;

      }

    </style>

      

      <body>

        <p>Learn, Build & Test Your Codes.</p>

      </body>

Let's Start Show Solution

<style>

      p{

        border: 3px solid blue;

        border-radius: 5px;

      }

    </style>

      

      <body>

        <p>Learn, Build & Test Your Codes.</p>

      </body>

CSS Quiz Test

CSS Border

Understanding different border styles

Setting the Border Width

Specifying the Border Color

The Border Shorthand Property

Help Us to Improve our content

EXERCISE - 1

Important Links

Company

Others

Explore

CSS Border

Understanding different border styles

Setting the Border Width

Specifying the Border Color

The Border Shorthand Property

Help Us to Improve our content

EXERCISE - 1

Important Links

Follow us on social :

Company

Others

Explore

Subscribe to Our News Letter!

Follow us on social :