How to create and style border using CSS ? (original) (raw)

Last Updated : 23 Jul, 2025

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

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

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: A3D 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: Here is a basic example of border-style property.

HTML `

GeeksForGeeks

`

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;

Example:

HTML `

GeeksForGeeks

`

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: Here is an example of the above-explained property.

HTML `

GeeksForGeeks

`

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.

Syntax:

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

Example: Here we are using the above method.

HTML `

GeeksForGeeks

`

Output:

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

Syntax :

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

border: 5px dotted red;

Example: In this example, we are using the above method.

HTML `

GeeksForGeeks

`

Output:

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

Syntax:

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

Example: Here we are using the above-explained method.

HTML `

GeeksForGeeks

`

Output: