CSS Border

By CSS Border Property you can Customize Border’s Look and Feel according to your choice. You can set Border Color, Width, Direction, etc. according to your choice.

CSS Border Properties

Different properties are provided by CSS for different styles of Border.

  1. border-style
  2. border-width
  3. border-color
  4. border-radius
  5. border

The border-style Property

Border Type is Declare by border-style Property.

By Border Type we mean what type of Border you want to apply on Element.

Many types of Border Style are provided by CSS. These are called values

  • none – There is no border.
  • solid – Border in a straight line.
  • double – Border in two straight lines.
  • dashed – Border line turns into (-)dashed.
  • dotted – Border line turns into (..)dots.
  • groove – Border line appears in Groove Style.
  • ridge – Border line appears in Ridge Style.
  • inset – Border appears in Inset Style
  • outset – Border appears in Outset Style
  • mix – Border appears in the Mix Style

Example

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

When you declare Border for an Element, it remains the same across all (top, right, bottom, left). But you can set Border individually also. The following values ​​are used for this.

  • border-top-style – This sets the Style of the Element Top Border.
  • border-right-style – From this, the Style of Right Border is set to Element.
  • border-bottom-style – From this, the Style of the Bottom Border of Element is set.
  • border-left-style – This sets the Style of the Left Border of the Element

The border-width Property

You can set the thickness of Border by this Border Property. You can set the border in thin, medium and thick thickness. If you want to set Border Width to px, cm, pt etc. in Absolute Measurement Units too.

You can set the thickness on the four sides of an Element Border. Whose values ​​are the following…

  1. border-top-width – Element’s Top Border Width is set.
  2. border-right-width – Element’s Right Border Width is set.
  3. border-bottom-width – Bottom Border Width of Element is set.
  4. border-left-width – Element’s Left Border Width is set.

Example

p {
    border-width: medium 10px thick 15px;
}

The border-color Property

This Border Property is used to set Border Color. Border Color You can set in Color Name, RGB Value, Hex Value etc. For more about this, you can read our CSS Color Tutorial.

You can set any Element Border Color separately from all around. The following values ​​are used for this.

  • border-top-color – Top Border’s Color is set.
  • border-right-color – Right Border’s Color is set.
  • border-bottom-color – Color of Bottom Border is set.
  • border-left-color – Color is set to Left Border.

Example

h4 {
border-color: red; border-style: dashed;
}

p {
border-color: green; border-style: double;
}

The border Shorthand Property

All Border Properties are set in only one property by this property.

In this property we have made three Values ​​Declare together. Represents the first border-width, the second border-color and the final border-style.

Example

h4 {
border: 2px red dashed;
}

The border-radius Property

Border-radius property is used to set the corners of the border. You can also set its value in Pixels, Points or Percentage.

Example

h4 {
border-color: red; border-style: dashed; border-radius: 20px;
}
p {
border-color: green; border-style: double; border-radius: 50%
}