CSS Border

CSS border properties are used to set a border around an element. You can also change the style, size and color using the border properties.
Here are the CSS border porperties:

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

The border-color Property

It used to change the color of the border around an element. The color can be changed in three ways:

  • Using name: You can change the color simply using the name of the color. Example: "blue"
  • Using RGB value: You can also change the color using the RGB(red, green, blue) values. Example: "rgb(50, 50, 50)"
  • Hex value: The another way is using the Hex value for changing the color. Example: #ffffff
  • transparent: The inherited color from the element.

Example:

p.red {
  border-color: red;
}
p.black {
  border-color: #000000;
}

Run Example

You can change the color of a specific side of a border using the following properties:

  • border-top-color
  • border-bottom-color
  • border-left-color
  • border-right-color

The border-style Property

There are a lot of styles for the border-style property. The styles ar given below:

  • none: It specifies no border.
  • solid: It specifies a solid single line as a border.
  • dotted: The border is made by dots.
  • dashed: the border is made by dashes.
  • double: It specifies two solid single line as a border.
  • groove: It specifies a 3d grooved line as a border.
  • ridge: It specifies a 3d ridged line as a border.
  • inset: It specifies a 3d inset line as a border.
  • outset: It specifies a 3d outset line as a border.
  • hidden: It specifies a hidden line as a border.

Example:

p.none {
  border-style: none;
}
p.solid {
  border-style: solid;
}
p.dotted {
  border-style: dotted;
}
p.dashed {
  border-style: dashed;
}
p.groove {
  border-style: groove;
}
p.ridge {
  border-style: ridge;
}
p.inset {
  border-style: inset;
}
p.outset {
  border-style: outset;
}
p.hidden {
  border-style: hidden;
}

Run Example

You can change the style of a specific side of a border using the following properties:

  • border-top-style
  • border-bottom-style
  • border-left-style
  • border-right-style

The border-width Property

It used to fix the width of the border around an element. The value of the border-widht property can be used in px, pt, em, cm or can be used in thick, thin , medium.

Example:

p.pixel {
  border-width: 2px;
}
p.thick {
  border-width: thick;
}

Run Example

You can change the width of a specific side of a border using the following properties:

  • border-top-width
  • border-bottom-width
  • border-left-width
  • border-right-width

Recommended Posts:

Related Tags: HTML Basics, CSS Basics, Bootstrap