CSS border shadow

In web design, borders and shadows are commonly used decorative styles that can add a sense of three-dimensionality and aesthetics to page elements. In CSS, we can create a variety of border and shadow effects with simple code. This article will explain how to use border and shadow styles to decorate web elements in CSS.

Border Styles

In CSS, we use the border property to define the style of an element’s border. The border property accepts one to four values, representing the border’s thickness, style, color, and corner radius.

Border Thickness

Border thickness can be defined using the border-width property. Possible values are:

thin: Thin border
medium: Medium border
thick: Thick border
: Specific length, such as 1px, 2px

div { 
border: 2px solid black; 
}

Border Style

You can define the border style using the border-style property. The values are as follows:

solid: solid line
dotted: dotted line
dashed: dashed line
double: double line
groove: groove effect
ridge: raised effect
inset: inner shadow effect
outset: outer shadow effect

div { 
border: 2px dotted black; 
}

Border Color

You can define the border color using the border-color property. You can use a specific color value or a predefined color name.

div {
border: 2px solid red; 
}

Rounded Border

You can define an element’s rounded corners using the border-radius property. You can set the radius of the rounded corners.

div {
border: 2px solid black; 
border-radius: 10px; 
}

Shadow Style

In CSS3, the box-shadow property was added to define the shadow effect of an element. You can set the shadow’s horizontal and vertical offsets, blur radius, shadow color, and inner and outer shadows.

Blurred Shadow

You can set the blur radius to create a blurred shadow effect. A larger value results in a more blurred shadow.

div { 
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 
}

Inner Shadow

You can use the inset keyword to define an inner shadow effect.

div { 
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 
}

Multiple Shadows

You can set multiple shadow effects, separated by commas.

div {
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), -5px -5px 5px rgba(255, 0,0, 0.5); 
}

Conclusion

By using CSS border and shadow styles, we can add three-dimensionality and aesthetics to web page elements, improving the user experience.