borders-and-outlines.md

⚑ Borders and Outlines

These properties is used for displaying edges of the elements based on usage.

Border property will draw the lines on the element whenever the page gets loaded. But outline property will highlights the element when it gets focused by keyboard navigations.

To apply borders or outlines to specific sides of an element, use the corresponding properties (e.g., border-top, border-right, border-bottom, border-left

☴ Overview:

1. Border width
2. Border style
3. Border color
4. Outlines
5. Box Shadow

✦ Border Width:

It sets the width of the border.

Syntax: border-width: value;

div {
  border-width: 2px;
}

✦ Border Style:

It sets the style of the border. Such as dashed, dotted, double, inset, outset, ridge, solid. To hide border for the element use the value none.

Syntax: border-style: value;

div {
  border-style: solid;
}

✦ Border Color:

It sets the color of the border.

Syntax: border-color: value;

div {
  border-color: blue;
}

✦ Outlines:

This will drawn a line around the outside of an element, without affecting its layout or size.

Syntax: outline: value; or outline: width style color;

input {
  outline: 2px dotted green;
}

✦ Box Shadow:

This will add or apply shadow effect to the edges of the elements.

Syntax: box-shadow: x-offset y-offset blur spread color;

/* New morphism box shadow effect on outset */
.div:hover {
	box-shadow: 12px 12px 12px rgba(0,0,0,0.1),
	-10px -10px 10px white;
}

/* New morphism box shadow effect on inset */
.div:hover {
	box-shadow: 12px 12px 12px rgba(0,0,0,0.1) inset,
	-10px -10px 10px white inset;
}

---

⇪ To Top

❮ Previous Topic   Next Topic ❯

⌂ Goto Home Page