Styling Borders in CSS

Tweet

Border is a line that runs around an element. Initially border is invisible, but it can be made visible using certain CSS properties. The flexibility of border properties can also be used to make designs around the element. One can control three different properties of each border,

1. Width
2. Style
3. Color

1.Width

#em p {
     border-width: 1em;
}

#em p+p {
     border-width: 2em;
}

#unit p {
     border-width: thin;
}

#unit p {
     border-width: thick;
}

The border width property sets the width of the border. The width can be given in text values like thin, medium or thick. This value can also be numerical like ems, px, percentage and so on.

2.Style

p.solid {
      border-style: solid;
}

p.dashed {
      border-style: dashed;
}

p.dotted {
      border-style: dotted;
}

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;
}

The border style property determines the style of the border with various styles like solid, dashed, dotted, double, groove, ridge, inset, outset, none and hidden. The difference between the hidden and none, is that the hidden value do not allow other borders into the content when collapsing borders. The default style property is solid. The style property is much useful in designing the elements in a webpage.

3.Color

p.keyword {
     border-color: orange;
}

p.rgb {
     border-color: rgb(99,99,99);
}

p.hex {
     border-color: #069;
}

Border color is used to color the border. The values can be of any keywords, RGB value or hexadecimal values.

DEFAULT BORDER VALUES: Of the three border properties(width, style and color) border style is the only mandatory property. If the border width is not applied, then it takes the default medium value. And the default border color is the color property applied to that element, when border color is not defined.

Border Shorthand property

The border shorthand property makes the width, style and color styles applied in a single border property. This helps in minimizing the code when applying CSS styles to the HTML element effectively.

img {
   border: 3px dotted #069;
}