CSS makes the border raised
CSS Raised Border
In web design, borders are a common element used to decorate and distinguish different content. Typically, borders are flat, but sometimes we want to make them raised for added visual impact. In this article, we’ll explain how to use CSS to create raised borders, giving your web pages a more dynamic and interesting look.
1. box-shadow Property
The box-shadow property can be used to create a shadow effect on an element. By setting the appropriate parameters, we can achieve a raised border effect. Here is a simple sample code:
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<div class="box"></div>
In this example, we create a box with a width and height of 200px and a gray background. We then add a black shadow using the box-shadow property. This shadow gives the box a raised appearance.
2. Multi-layered shadow effects
In addition to a single shadow effect, we can also create a multi-layered shadow effect by setting multiple box-shadow properties, thereby increasing the appearance of a raised border. Here’s an example code:
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5),
0 0 20px rgba(0, 0, 0, 0.3),
0 0 30px rgba(0, 0, 0, 0.1);
}
<div class="box"></div>
In this example, we set three shadow effects of different sizes and opacities. By overlaying these shadow effects, we can achieve a more three-dimensional raised border effect.
3. Inner Shadow Effect
In addition to the outer shadow effect, we can also use the inset keyword to create an inner shadow effect, thereby achieving an inner raised effect. Here’s an example code:
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
<div class="box"></div>
In this example, we use the inset keyword to create a shadow effect inside the box, thus achieving an inner raised effect.
4. Raised Border Effect
In addition to using the box-shadow property, we can also achieve a raised border effect using the ::before and ::after pseudo-elements. Here is a sample code:
.box {
position: relative;
width: 200px;
height: 200px; background-color: #f0f0f0;
}
.box::before,
.box::after {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.box::after {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
<div class="box"></div>
In this example, we use the ::before and ::after pseudo-elements to create a two-layer shadow effect. By adjusting their position and size, we can achieve an effect similar to a raised border.
5. Border Raise Animation
In addition to the static raised border effect, we can also create a dynamic raised border effect through CSS animation. Here is a sample code:
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
animation: pulse 2s infinite alternate;
}
@keyframes pulse {
0% {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
100% {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
}
<div class="box"></div>
In this example, we use CSS animations with @keyframes to define a shadow effect that changes from 10px to 20px, and then apply this animation to the box, creating a dynamic raised border effect.
6. Raised Border Button
Raised border effects can be applied not only to boxes but also to elements like buttons to enhance the interactive experience. Here is a sample code:
.button {
padding: 10px 20px;
background-color: #f0f0f0;
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: box-shadow 0.3s;
}
.button:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
<button class="button">Click me</button>
In this example, we create a button element and, by setting the box-shadow and transition properties, achieve a raised border effect when the mouse hovers over it.
7. Raised Border Card
The raised border effect can also be applied to elements like cards to enhance the overall three-dimensional effect. Here is a sample code:
.card {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: box-shadow 0.3s;
}
.card:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
In this example, we create a card element. By setting the box-shadow and transition properties, we achieve a raised border effect when the mouse hovers over it, making the card look more vivid and interesting.
8. Raised Border Image
In addition to text and background colors, the raised border effect can also be applied to https://coder-cafe.com/wp-content/uploads/2025/09/images to increase their three-dimensionality. Here is a sample code:
.image {
width: 200px;
height: 200px;
background-image: url('https://geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/image.jpg');
background-size: cover;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: box-shadow 0.3s;
}
.image:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
<div class="image"></div>
In this example, we create an element with a background image. By setting the box-shadow and transition properties, we create a raised border effect when the mouse hovers over the image, making the image look more vivid and interesting.
9. Raised Border Title
The raised border effect can also be applied to text elements such as titles to make them more attractive. Here is a sample code:
.title {
font-size: 24px;
color: #333;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
transition: text-shadow 0.3s;
}
.title:hover {
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<h1 class="title">Title</h1>
In this example, we create a title element. By setting the text-shadow and transition properties, we create a raised effect on the title when the mouse hovers over it, making it stand out and more eye-catching.
10. Raised Border List
The raised border effect can also be applied to elements like lists to enhance their three-dimensionality. Here is a sample code:
.list {
list-style-type: none;
}
.list li {
padding: 10px;
background-color: #f0f0f0;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
transition: box-shadow 0.3s;
}
.list li:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
In this example, we created a list element. By setting the box-shadow and transition properties, we achieved a raised effect on the list items when the mouse hovers over them, making the list look more lively and interesting.
Through the above code examples, we’ve detailed how to use CSS to create raised borders, including using the box-shadow property, multi-layer shadow effects, inner shadow effects, pseudo-elements, animations, buttons, cards, https://coder-cafe.com/wp-content/uploads/2025/09/images, headings, and lists. By skillfully applying these techniques, you can add more creativity and personality to your web designs, making them more lively and interesting.