Class 37 | CSS Borders and Shadows

CSS Borders and Shadows
CSS Borders and Shadows

In CSS, borders and shadows can add visual interest and depth to elements on a web page. Borders can be applied to create a visible boundary around a component, while shadows can develop a sense of depth and separation between elements.

Here are some examples of how to use CSS borders and shadows:

  1. Border Styles

You can choose from several border styles, including solid, dashed, dotted, double, groove, ridge, inset, and outset. You can also set the border width and color.

Example:

/* Add a solid black border to a paragraph */
p {
  border: 1px solid black;
}

/* Add a dashed red border to an image */
img {
  border: 2px dashed red;
}

/* Add a double blue border to a heading */
h1 {
  border: 3px double blue;
}
  1. Border Radius

The border-radius property allows you to create rounded corners on an element’s border. You can set the radius value in pixels or as a percentage of the element’s width.

Example:

/* Add a border with rounded corners to a button */
button {
  border: 2px solid blue;
  border-radius: 5px;
}

/* Add a border with very rounded corners to an image */
img {
  border: 1px solid black;
  border-radius: 50%;
}
  1. Box Shadow

The box-shadow property allows you to add a drop shadow to an element. You can set the horizontal and vertical offset of the shadow, the blur radius, the spread radius, and the color of the shadow.

Example:

/* Add a black drop shadow to a div */
div {
  box-shadow: 2px 2px 5px black;
}

/* Add a blue drop shadow to a heading with more spread */
h1 {
  box-shadow: 0 0 10px 5px blue;
}
  1. Text Shadow

The text-shadow property allows you to add a drop shadow to text. You can set the horizontal and vertical offset of the shadow, the blur radius, and the color of the shadow.

Example:

/* Add a white drop shadow to a heading */
h1 {
  text-shadow: 2px 2px 5px white;
}

/* Add a blue drop shadow to a paragraph */
p {
  text-shadow: 1px 1px 2px blue;
}

Overall, borders and shadows are great tools to enhance the visual appeal of a website and can be easily customized using CSS.

Leave a Comment

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

Scroll to Top