To add a border to an image, use the border property and set it to the element. This is the shorthand property to set the border style, width, color, etc. The border style can be solid, double, dotted, etc.

Add a Border to an Image

The following is the code to add a border to an image using CSS. We have set the border in the img element ?

img {
   border: 8px solid rgb(0, 238, 255);
   width: 400px;
   height: 400px;
}

Example

Let us see an example to add a border to an image ?

   


   
Border Around Image Example
   

Add Style to the Image Border

If you want to set a border, adding a style to the border on an image is required. Various styles are available for a border ?

• Dotted ? Used to specify a dotted border

• Dashed ? Used to specify a dashed border

• Solid ? Used to specify a solid border

• Double ? Used to specify a double border

Example

If you won?t set the border color, it will automatically set it to black. Let us see an example to add style to the image border ?

   


   
Border Around Image Example
   
Set the border...
   

Add Color to the Image Border

Using the border property, we can easily set the border color. However, to mention the border style is required. Let us see an example to add color to the image border ?

Example

   


   
Border Around Image Example
   
Set the border...
   

Add Width to the Image Border

Using the border property, we can easily set the border width. However, to mention the border style is required. Let us see an example to add width to the image border ?

Example

   


   
Border Around Image Example
   
Set the border...
   

Create Rounded Images With Border

The border-radius property is used to create rounded images. To set a border, use the border property. Let us see an example to create rounded images with border ?

Example

   


   
Border Around Image Example
   
Create rounded border...