CSS div border line inward

In CSS, we can control how table borders collapse by setting the border-collapse property. The border-collapse property has two possible values: collapse and separate. When set to collapse, the table borders collapse; when set to separate, the table borders appear separate.

However, the standard div element doesn’t have a border-collapse property to directly control how borders collapse. However, we can achieve the effect of a div element’s borders appearing inwards by cleverly setting CSS styles.

Method 1: Using Padding and Background Color

In this method, we can achieve an inward-facing border effect by setting the padding and background color of the div element. The specific steps are as follows:

Set the width and height of the div element;
Set the padding of the div element to center the content;
Set the background-color property to the border color;
Set the border property to 0.

The sample code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS div border line inward</title> 
<style> 
.border-inside { 
width: 200px; 
height: 100px; 
padding: 10px; 
background-color: #000; 
border: 0; 
color: #fff; 
} </style> 
</head> 
<body> 
<div class="border-inside"> 
Padding and background color create an inward border effect 
</div> 
</body> 
</html>

The effect is as follows:

------------------------- 
| Padding and background color create an inward border effect | 
------------------------

Method 2: Using the ::after pseudo-element

Another common method is to use the CSS pseudo-element ::after to create an inward border effect. The specific steps are as follows:

Set the style of the div element;
Use the ::after pseudo-element to create an inner border;
Set the margin to a negative value to offset the pseudo-element inward.

The sample code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS div border line inward</title> 
<style> .border-inside {
width: 200px;
height: 100px;
position: relative;
background-color: #000;
color: #fff;
}
.border-inside::after {
content: "";
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
border: 2px solid #000;
}
</style>

</head>

<body>

<div class="border-inside">

Use the pseudo-element ::after to achieve an inward border effect

</div>

</body>

</html>

The effect is as follows:

--------------------------------
| Using the pseudo-element ::after to achieve an inward border effect |
--------------------------------

Method 3: Using box-shadow

In addition to the above two methods, we can also use the box-shadow property to achieve an inward border effect. The specific steps are as follows:

Set the style of the div element;
Use the box-shadow property to create an inner shadow;
Set the inset value to the inner shadow;
Set the color and offset.

The sample code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS div border line inward</title> 
<style> 
.border-inside { 
width: 200px; 
height: 100px; 
background-color: #000; 
color: #fff; 
box-shadow: inset 0 0 0 10px black; 
} 
</style> 
</head> 
<body> <div class="border-inside">
Use the box-shadow property to create an inward-facing border effect.
</div>

</body>

</html>

The effect is as follows:

--------------------------------
| Use the box-shadow property to create an inward-facing border effect |
--------------------------------

Through the above method, we can create an inward-facing border effect for the div element, making the page more aesthetically pleasing and unified. In actual applications, you can choose the appropriate method to achieve the desired effect based on your specific needs.