Border

We can style the border of our element easily with CSS. For example, we can set a specific width, style, and color.

I. Styling borders

• border-width: The thickness of the border. A border’s thickness can be set in pixels or with one of the keywords: thin, medium, or thick.
• border-style: The design of the border. The typical styles are none, dotted, and solid.
• border-color: The color of the border.

p {
  border-width: 5px;
  border-style: dotted
  border-color: black;
}

We can also use border shorthand

p {
  border: 5px dotted black;
}

We can control the border of different sides independently.

div {
  border-left: 5px solid yellow;
  border-right: 10px dotted red;
  border-bottom: 20px double green;
  border-top: 15px dashed blue;
}

II. Border radius

border-radius gives a curved corner to an element.

p {
  border-radius: 5px;
}