CSS Border Properties

      No Comments on CSS Border Properties

The CSS Border Properties allow you to specify the style, width, and color of an element’s border.

CSS border can be applied to any element in HTML. Borders can be modified to be displayed in different styles,colors and also sides can be different.

Border Styles

The border-styleproperty specifies what kind of border to display.

The following values are allowed:

  • dotted – Defines a dotted border
  • dashed – Defines a dashed border
  • solid – Defines a solid border
  • double – Defines a double border
  • groove – Defines a 3D grooved border. The effect depends on the border-color value
  • ridge – Defines a 3D ridged border. The effect depends on the border-color value
  • inset – Defines a 3D inset border. The effect depends on the border-color value
  • outset – Defines a 3D outset border. The effect depends on the border-color value
  • none – Defines no border
  • hidden – Defines a hidden border

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

No border.

A hidden border.

A mixed border.

Bordering Individual sides

Border can be applied in different ways to different sides

.dif{
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Example:

My border for each side is different

The Border Width

The border-width property specifies the width of the four borders.The width can be set as a specific size (in px, pt, cm, em, etc) .

{
border-width:2px;
}

Example:

My width is 2px

The width can also hold one of the three per-defined values: thin, medium, or thick.

{
border-width:thick;
}

Example:

My width is thick

Border-Color

The border-color property is used to set the color of the four borders.

The color can be set by:

  1. name – specify a color name, like “red”
  2. Hex – specify a hex value, like “#ff0000”
  3. RGB – specify a RGB value, like “rgb(255,0,0)”

    transparent

{
border-color:red;
or
border-color:#ccc;
}

Example:

My border color is green

Border radius property

The border-radius property let us have rounded borders. The radius can be defined in terms of px,em or percentage.

{
border-radius:2px;
or
border-radius:50%;
}

Example:

I am rounded

Border Shorthand Property

To shorten the code, it is also possible to specify all the individual border properties in one property.
The border property is a shorthand property for the following individual border properties:

  • border-width
  • border-style (required)
  • border-color

Syntax: { border:border-style border-width border-color }
Example:

border:solid 1px orange

Example:

I have a full solid border
I have a left blue border
I have a red top solid border
I have a orange rounded border

Leave a Reply

Your email address will not be published. Required fields are marked *