How to use the border and box-shadow Properties In CSS

Using the Outline and Box Shadows

Set the CSS properties like a border for solid borders and box shadow for shadows. Element 1 has a solid border and a box shadow. Element 2 has a dashed border, rounded corners, and a box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3).

Example: Illustration of adding borders and shadows to elements using border and box-shadow properties.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Borders and shadows</title> 
    <style> 
        .element1 { 
            width: 200px; 
            height: 100px; 
            background-color: rgb(201, 236, 185); 
            border: 5px solid rgb(43, 177, 19); 
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); 
            margin: 20px; 
            text-align: center; 
        } 
  
        .element2 { 
            width: 200px; 
            height: 100px; 
            background-color: #e1cdcd; 
            border-radius: 10px; 
            border: 1px dashed #4CAF50; 
            box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.3); 
            margin: 20px; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        w3wiki 
    </h1> 
    <h3> 
        Adding add borders 
        and shadows to elements 
    </h3> 
    <div class="element1">Element 1</div> 
    <div class="element2">Element 2</div> 
</body> 
  
</html>

Output:

How to add Borders and Shadows to Elements in CSS ?

Apply box shadows to elements to create a 3D effect, whereas adding borders to containers or boxes can enhance the structural clarity of a layout. In this article, we will learn how to add borders and shadows to the elements in CSS. We will explore two different approaches to adding borders and shadows.

Table of Content