Skip to content
Related Articles

Related Articles

Improve Article

How to create and style border using CSS ?

  • Last Updated : 22 Mar, 2021

The border property is used to create a border around an element and defines how it should look. There are three properties of the border.

border-style property:

This defines how the border should look like. It can be solid, dashed, offset, etc. The following values are allowed.

  • dotted:  A dotted border
  • dashed: A dashed border
  • solid: A solid border
  • double: A double border
  • groove: A 3D grooved border.
  • ridge:  A 3D ridged border.
  • inset:  A 3D inset border.
  • outset: A 3D outset border.
  • none: A no border style
  • hidden: A hidden border.

Example : 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>
  
<!-- Adding some CSS -->
<style>
    h1{
        margin: auto;
        padding: 10px;
        color: green;
        margin-top: 220px;
        font-size: 48px;
        width: fit-content;
  
        /* Border */
        border-style: dashed;
    }
</style>
<body>
    <h1>GeeksForGeeks</h1>
</body>
</html>

Output:



dashed border

Similarly, we can use any style from the above-given list based on our choice. We can individually change the style of the bottom, left, right, and top of the border.

Example: In the above HTML code, just change the stylesheet of the border as given below.

border-bottom-style : dashed;
border-left-style: solid;
border-right-style: double;
border-top-style: dotted;

Output:

border-width property: This property is used to define the width of all borders. The width can be of any size(in px, pt, cm, em, etc) or by using pre-defined values: thin, medium, or thick.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>
  
<!-- Adding some CSS -->
<style>
    h1{
        margin: auto;
        padding: 10px;
        color: green;
        margin-top: 220px;
        font-size: 48px;
        width: fit-content;
  
        /* Border */
        border-style: solid;
        border-width: 5px;
    }
</style>
<body>
    <h1>GeeksForGeeks</h1>
</body>
</html>

Output :



border-color property:

This property is used to change the color of all four borders. Change or add the following in the above HTML code in the style section.

border-color : green;
border-top-color: black;
border-bottom-color: yellow;

Output:

Border Shorthand:

We can define all the above properties in a single property, border.

Syntax :

border:  (border-width) (border-style) (border-color);

Example : 

border: 5px dotted red;

Output:

Rounded borders:

The border-radius property is used to add rounded borders. Change the above HTML code with the following syntax.

Example:

border: 5px solid red;
border-radius : 15px;

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :