Skip to content

day02-adding-borders-and-shadows-to-elements-with-css.md

Latest commit

 

History

History
77 lines (49 loc) · 2.77 KB

day02-adding-borders-and-shadows-to-elements-with-css.md

File metadata and controls

77 lines (49 loc) · 2.77 KB
Raw

Adding Borders and Shadows to Elements with CSS

In the realm of character-driven code organization, borders and shadows provide visual cues that enhance the appearance and depth of our HTML elements. With CSS, we have the power to add borders and shadows to elements, creating a sense of structure and dimensionality in our character-driven narratives. In this material, we will explore how to add borders and shadows to elements using CSS.

Adding Borders

CSS provides properties to control the borders of HTML elements:

Border Style

The border-style property defines the style of the border. It can take values like solid, dashed, dotted, double, and more. For example:

div {
  border-style: solid;
}

In this example, all <div> elements will have a solid border.

Border Width

The border-width property determines the width of the border. It can be specified using different units like pixels (px), percentages (%), or relative units (em or rem). For example:

p {
  border-width: 2px;
}

In this case, all <p> elements will have a border width of 2 pixels.

Border Color

The border-color property sets the color of the border. It can be specified using color names, hexadecimal values, RGB values, or RGBA values. For example:

h1 {
  border-color: red;
}

In this example, the border color of all <h1> elements will be set to red.

Border Radius

The border-radius property adds rounded corners to the border. It can take a single value to apply the same radius to all corners or multiple values to specify different radii for each corner. For example:

button {
  border-radius: 4px;
}

In this case, all <button> elements will have a border with a 4-pixel border radius.

Adding Shadows

CSS also allows us to add shadows to elements:

Box Shadow

The box-shadow property adds a shadow effect to an element. It can take values for horizontal offset, vertical offset, blur radius, spread radius, and color. For example:

div {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

In this example, all <div> elements will have a box shadow with a 2-pixel horizontal offset, 2-pixel vertical offset, 4-pixel blur radius, and a semi-transparent black color.

Conclusion

Adding borders and shadows with CSS is a powerful technique in character-driven code organization. By utilizing border styles, widths, colors, and border radii, we can define the visual boundaries of our elements. Additionally, applying box shadows creates depth and dimensionality within our character-driven narratives.

Now that you have a solid understanding of adding borders and shadows to elements with CSS, unleash your creativity and experiment with different styles to bring depth and structure to your character-driven code!