CSS simulated border

In web development, we often need to add borders to elements to highlight or beautify the page layout. The CSS border property is very convenient for adding simple border styles to elements, but sometimes we need more complex and cool border effects. This article will introduce some techniques for simulating various border effects with pure CSS.

1. Implementing Rounded Borders

First, let’s create an element with rounded borders. In CSS3, the border-radius property makes it easy to achieve rounded corners.

<!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>Round Border</title> 
<style> 
.box { 
width: 200px; 
height: 100px; 
background-color: #f0f0f0; 
border: 1px solid #ccc; 
border-radius: 10px; 
padding: 20px; 
text-align: center; 
} 
</style> 
</head> 
<body> 
<div class="box">Round Border</div> 
</body> 
</html>

In the above example, we add a rounded border to a div element.

2. Achieving a Double Border Effect

Sometimes we want to achieve a double border effect on an element. This can be simulated using the box-shadow property.

<!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>Double Border</title> 
<style> 
.box { 
width: 200px; 
height: 100px; 
background-color: #f0f0f0; 
padding: 20px; 
box-shadow: 
0 0 0 2px red, 
0 0 0 4px blue; 
text-align: center; 
} </style> 
</head> 
<body> 
<div class="box">Double Border</div> 
</body> 
</html>

In the above example, we use the box-shadow property to create a double border effect.

3. Creating Beveled Borders

Sometimes we want to add a bevel effect to an element’s border. We can use the transform property to achieve this.

<!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>Slope Border</title> 
<style> 
.box { 
width: 200px; 
height: 100px; 
background-color: #f0f0f0; 
border: 1px solid #ccc; 
clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); 
padding: 20px; 
text-align: center; }
</style>

</head>

<body>
<div class="box">Slope Border</div>

</body>

</html>

In the above example, we use the clip-path property to create a bevel border effect.

4. Creating Dynamic Border Effects

Sometimes we want to add dynamic effects to an element’s border, such as changing color when the mouse hovers over it. We can use the CSS :hover pseudo-class to achieve this.

<!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>Dynamic Border</title> 
<style> 
.box { 
width: 200px; 
height: 100px; 
background-color: #f0f0f0; 
border: 1px solid #ccc; 
padding: 20px; 
text-align: center; 
transition: border-color 0.3s; 
} 
.box:hover { 
border-color: blue; 
} 
</style> 
</head> 
<body> 
<div class="box">Dynamic Border</div> 
</body> 
</html>

In the above example we use The :hover pseudo-class and the transition attribute implement a border color change effect when the mouse hovers.

Summary

Through this article, we learned how to use CSS to simulate various border effects, including rounded borders, double borders, beveled borders, and dynamic border effects. CSS provides a wealth of style properties and techniques for creating a variety of cool page effects.