CSS Border

Use a CSS border to set up a border around the HTML elements.

Using CSS border, you can specify types of borders for your elements using border-style, border-color, border-width, border-image, and border-radius.

CSS Border Examples

CSS border-radius. This is having a dotted border with radius property.

Solid Border. This has a black solid border at all sides with border width as 3px. This means the border size is 3px.

CSS border-bottom. This has a border at bottom only.

CSS border color. The element has a blue color border.

border length CSS - you can even control the length of the border through CSS

Most used Syntax of CSS-Border:
border: border-width border-style border-color;

This is a shorthand syntax of CSS border and there is another syntax for CSS borders as well as you will see on this web page. border-style property is mandatory and cannot be removed.

There is a way to set up the CSS border property for individual sides of the borders separately.

Syntax of CSS-Border-side:
border-top: border-top-width border-top-style border-top-color;
here, border-top-style is mandatory

border-right: border-right-width border-right-style border-right-color;
here, border-right-style is mandatory

border-bottom: border-bottom-width border-bottom-style border-bottom-color;
here, border-bottom-style is mandatory

border-left: border-left-width border-left-style border-left-color;
here, border-left-style is mandatory

Note/Info

It is extremely important to note that border-style is mandatory for defining CSS borders and it cannot be missed so you MUST set the border-style for all border definitions.

CSS border width

CSS border-width property is used to set the width of the border.

border-width is the shorthand for border-top-width, border-right-width, border-bottom-width and border-left-width.

There border-width can take anyone of the below values:

valid-length – a valid length value of border width
medium – medium width of the border
thin –thin width of the border
thick – thick width of the border
inherit – Get width from the parent border
none – remove any border

Example to use shorthand border-width property

<style>
  #solid-border {
   border-style:solid;
   border-width:3px;
}
</style>

Example showing border-width with 3 values

<style>
  #border-3-width {
   border-style:dashed;
   border-width:2px 5px 12px;
   padding:20px;
}
</style>

So, either you can set the width for all the 4 borders at the same time using CSS border-width or you can also set width for each border separately using a subset of border width property like –

For a width of the top border –border-top-width.
A width of the right border – border-right-width.
And the width of the bottom border – border-bottom-width.
The width of the left border – The property is border-left-width.

You can define the width in cm, px, pt, em, inches, thin, thick, medium, etc. These are the ways to set the border by numeric values or by named value.

Example to set a border for specific sides

<style>
  #specbdr {
    border-style:solid;
    border-bottom-width:4px;
    border-left-width:12px;
    padding:20px;
}
</style>

CSS border Style

a) border-style property is used to set the design of the border. It is used to set a particular kind of appearance of your borders.

border-style is the shorthand for border-top-style, border-right-style, border-bottom-style and border-left-style.

b) So, either you can set the style for all the 4 borders at the same time using border-style or you can also set the style for each border separately using a subset of border style property like –

Style of the top border – The property is border-top-style.
And the style of the right border – The property is border-right-style.
Here the style of the bottom border – The property is border-bottom-style.
For a style of the left border – The property is border-left-style.

There are multiple border designs and you can define the border style as anyone of the below one:

solid
dashed
dotted
double
ridged
groove
inset
outset
outline
hidden
none

Example showing all the styles of the borders

<style>

  .sb {
      border-width:3px;
      border-style: solid;
      border-color: black; 
}

  .gb {
	  border-width:2px;
      border-style: groove;
      border-color: yellow; 
}

  .rb {
      border-width:5px;
      border-style: ridge;
      border-color: brown; 
}

  .dbb {
      border-width:2px;
      border-style: double;
      border-color: tomato; 
}

  .dsb {
      border-width:6px;
      border-style: dashed;
      border-color: green; 
}

  .dtb {
      border-width:7px;
      border-style: dotted;
      border-color: blue; 
}

  .inb {
      border-width:10px;
      border-style: inset;
      border-color: grey; 
}

  .otb {
      border-width:8px;
      border-style: outset;
      border-color: red; 
}

</style>

Example to use shorthand border-style property

<style>
  #groove {
   border-style:groove;
   border-width:4px;
}
</style>

Note/Info:

1.If border-style has 1 value.
For Example:
border-style : solid;

then, style of top, right, bottom, and left border is solid each.

2.If border-style has 2 values.
For Example:
border-style: dashed double;

then, the style of the top and bottom border is dashed, while the style of right and left border is double.

3.If border-style has 3 values.
For Example:
border-style: solid dashed-dotted;

then, the style of top border is solid, style of right and left border is dashed, and the style of the bottom border is dotted.

4.If border-style has 4 values.
For Example:
border-style: double ridged hidden inset ;

then, the style of top border is double, style of the right border is ridged, the style of the bottom border is none, and the style of the left border is inset.

Example showing border style with 2 values

<style>
  #border-2-style {
   border-width:2px;
   border-style:dashed groove;
   padding:20px;
}
</style>

Example showing the border style of different sides

<style>
  p.specbdrstyle {
    border-width:4px;  
    border-top-style:solid;
    border-right-style:dashed;
    padding:20px;
}
</style>

CSS border color

Using CSS border-color property, you can set the border color by using the color value.

a) border-color property is used to set the color of the border.

border-color is the shorthand for border-top-color, border-right-color, border-bottom-color and border-left-color.

b) So, either you can set the colors for all the 4 borders at the same time using border-color property or you can also set colors for each border separately using a subset of border color property like –

Color of the top border – The property is border-top-color.
And Color of the right border – The property is border-right-color.
Here the Color of the bottom border – The property is border-bottom-color.
Color of the left border – The property is border-left-color.

There are 6 ways to set the color value: color name, RGB value, Hexadecimal code, RGBA value, HSL value, and hsla value.

Example to use shorthand border-color property

<style>
  .styleval4 {
   border-width: 2px;      
   border-style: solid;
   border-color: tomato; 
}
</style>

CSS border color for specific sides

There are 4 sides of borders i.e. left the border, top border, right border, and bottom border.

You can also set different colors for specific borders using border-left-color, border-top-color, border-right-color, and border-bottom-color property.

Note/Info:

1.If border-color has 1 value.
For Example:
border-color: red;

then, the color of the top, right, bottom, and left border is Red.

2.If border-color has 2 values.
For Example:
border-color: red blue;

then, the color of the top and bottom border is red, while the color of the right and left border is blue.

3.If border-color has 3 values.
For Example:
border-color: yellow #008000 powderblue;

then, the color of the top border is yellow, the color of right and left border is #008000(hex value for green color), and the color of the bottom border is powderblue.

4.If border-color has 4 values.
For Example:
border-color: pink black violet tomato;

then, the color of the top border is pink, the color of the right border is black, the color of the bottom border is violet, and the color of the left border is a tomato.

Example showing border color with 2 values

<style>
  .side2color {
   border-width: 4px;      
   border-style: dashed;
   border-color: tomato blue; 
}
</style>

Follow @tutorial_brain

Example of different color borders for different sides

<style>
  #div2 {
   background-color:powderblue;
   border-width:4px;
   padding:5px;
   
   border-left-style: solid;
   border-left-color: red;

   border-top-style: Double;
   border-top-color: blue;

   border-right-style: Dotted;
   border-right-color: rgb(255,255,0);
   
   border-bottom-style: Groove;
   border-bottom-color: green;   
}
</style>

Warning/Note/Info

It is important to set border style property before the border color property always.

Follow @tutorial_brain

CSS border radius

If you want to set the round borders, then you should use the border-radius property of CSS.

The border-radius property is discussed in detail at Rounded border CSS page.

Example to make border rounded

<style>
#mainDiv {
  width:40%;
  height:260px;
  padding:50px;
  margin:10px;
  background-color:powderblue;
  border-radius:50%;  
  border: 40px solid blue;
}
</style>

CSS border Image

In fact, we can also set an image in borders using a border-image property of CSS.

CSS Border Image will be discussed in detail at the CSS Border Image Page.

Example of the border image

<style>
  #bdrimg {
    border: 20px solid transparent;
    border-image: url(image_borders.jpg) 20% round;
    margin: 10px;
}
</style>

CSS border shadow

You can also set the shadow for the borders using a box-shadow property of CSS.

CSS Border Shadow will be discussed in detail at CSS Border Shadow Page.

CSS Interview Question and Answers

1. How to set border in CSS?

Use border property to create a border around elements in CSS.
Syntax:

border: 2px solid blue;

How to set a colored border around text in CSS?

To create a colored border around text we need to give border property and specify the color.
For Example, if you want to give border around paragraph give below code.

p{
border:2px solid green;
}

Which property defines the width of the border?

CSS border-width property specifies width of the border.

border-width:3px;

4. Which property is used to set solid border?

Using CSS border-style property we can set solid border.

We can define the border style as:

border-style:solid;
border-style:dashed;
border-style:dotted;
border-style:double;
border-style:ridged;
border-style:groove;
border-style:inset;
border-style:outset;
border-style:outline;
border-style:hidden;
border-style:none;

How to change the border color on each side in CSS?

We can use the border-color property to change the border color on each side like a top, right, bottom, and left.

For Example: If border-color has 4 values.

Syntax: border-color: top right bottom left;
Example:border-color: pink black violet tomato;

6. How to make rounded border in CSS?

Use CSS border-radius property to create rounded corners.

border-radius:50%;