Jobs Hub

CSS border (Set Border around an Element)

The CSS border property is used to create a border around an element. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {border: 3px solid chocolate; padding: 14px;}
      p {border: 2px solid gray; padding: 10px;}
   </style>
</head>
<body>

   <h2>The border Property</h2>
   <p>This is a para.</p>
   
</body>
</html>
Output

The border Property

This is a para.

CSS border Syntax

The syntax of border property in CSS, is:

border: width style color;

For the value of color, either we can define the required color, or can use initial or inherit keyword to use the default value or inherit the value from its parent.

The border property with three values is used to define the following three properties at once:

Note - In all the above three, the border-style is required while defining the border property.

List of All CSS Border Properties

CSS Online Test

« Previous Tutorial Next Tutorial »