CSS / 6 MIN READ
Cool IMG Borders
Create eye-catching border effects for images using CSS.
From the original Fervor library. Examples may use older package versions.
Let’s dive into the magical world of border-radius and images in CSS. This tutorial will guide you through some cool tricks to make your web images stand out!
1. Basic Round Corners
What It Does: Rounds the corners of an image.
How to Do It:
img {
border-radius: 10px; /* Adjust the px value for different corner roundness */
}
Explanation: Setting border-radius to a specific value (like 10px) will round the corners of the image. The higher the value, the rounder the corners.
2. Perfect Circle
What It Does: Turns a square image into a circle.
How to Do It:
img {
border-radius: 50%;
}
Explanation: Setting border-radius to 50% on a square image makes it a perfect circle. For non-square images, it creates an oval shape.
3. Elliptical Rounding
What It Does: Creates elliptical rounded corners.
How to Do It:
img {
border-radius: 50% 20%;
}
Explanation: You can use two values to create an ellipse. The first value is for the horizontal radius, and the second is for the vertical radius.
4. Round Specific Corners
What It Does: Rounds only specific corners of an image.
How to Do It:
img {
border-radius: 10px 0 10px 0;
}
Explanation: The values represent the top-left, top-right, bottom-right, and bottom-left corners respectively. Here, only the top-left and bottom-right corners are rounded.
5. Clipping Paths with Border Radius
What It Does: Clips the image to create interesting shapes.
How to Do It:
img {
clip-path: circle(50% at 50% 50%);
}
Explanation: The clip-path property creates a clipping region to display part of an element. Here, it’s set to a circle with a radius of 50% at the center of the image.
6. Adding Box Shadows
What It Does: Adds a shadow around the image.
How to Do It:
img {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
Explanation: Combining border-radius with box-shadow gives the image a soft shadow effect, enhancing the rounded corners.
7. Border Radius with Hover Effect
What It Does: Adds an interactive hover effect.
How to Do It:
img {
border-radius: 10px;
transition: border-radius 0.3s ease;
}
img:hover {
border-radius: 50%;
}
Explanation: The transition property animates changes to the border-radius, creating a smooth effect when the user hovers over the image.
8. Gradient Borders with Rounded Corners
What It Does: Adds a gradient border with rounded corners.
How to Do It:
.img-container {
display: inline-block;
padding: 5px;
background: linear-gradient(45deg, #f06, transparent);
border-radius: 15px;
}
.img-container img {
display: block;
border-radius: 10px;
}
Explanation: By wrapping the image in a container and applying the gradient to the container’s background, you can achieve a cool gradient border effect around the image.
9. Advanced Shapes with Border Radius
What It Does: Creates complex shapes like notched corners.
How to Do It:
img {
border-radius: 20% 50% 30% 40% / 50% 20% 40% 30%;
}
Explanation: This syntax allows for creating more complex shapes by specifying different horizontal and vertical radii for each corner.
Conclusion
There you have it! With these techniques, you can give your images a stylish and modern look, making your web designs pop. Play around with the values to see how they change the appearance, and have fun experimenting!
Bonus cool Things
Let’s take these border-radius tricks up a notch by combining them with other CSS properties and techniques. Here are a few more ideas to make your images even cooler:
10. Adding Gradients to Images
What It Does: Overlays a gradient on the image.
How to Do It:
.img-container {
position: relative;
display: inline-block;
border-radius: 15px;
overflow: hidden;
}
.img-container img {
display: block;
border-radius: 15px;
}
.img-container::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to bottom right, rgba(255,0,150,0.5), rgba(0,150,255,0.5));
mix-blend-mode: multiply;
}
Explanation: Using a pseudo-element (::before) with mix-blend-mode, you can overlay a gradient on top of the image for a cool visual effect.
11. Rotating Images on Hover
What It Does: Rotates the image when you hover over it.
How to Do It:
img {
border-radius: 10px;
transition: transform 0.3s ease;
}
img:hover {
transform: rotate(10deg);
}
Explanation: Adding a transform: rotate property on hover makes the image tilt, adding an interactive element to your design.
12. Zoom In on Hover
What It Does: Scales up the image slightly when hovered over.
How to Do It:
img {
border-radius: 10px;
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.1);
}
Explanation: The scale transform enlarges the image a bit when the user hovers over it, creating a zoom-in effect.
13. Combining Shadow and Transform
What It Does: Adds a shadow and slight lift effect on hover.
How to Do It:
img {
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
img:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
Explanation: The translateY transform lifts the image upward slightly, while the box-shadow gives it a shadow, making it look like it’s floating.
14. Filter Effects
What It Does: Applies CSS filters like grayscale, blur, or brightness to the image.
How to Do It:
img {
border-radius: 10px;
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(100%);
}
Explanation: The filter property can apply various visual effects. Here, it changes the image to grayscale on hover.
15. Fancy Border with Rounded Corners
What It Does: Adds a patterned border with rounded corners.
How to Do It:
.img-container {
display: inline-block;
padding: 10px;
border: 5px dashed #f06;
border-radius: 15px;
}
.img-container img {
display: block;
border-radius: 10px;
}
Explanation: Applying a dashed or dotted border style to the container makes the border stand out while still having rounded corners.
16. CSS Grid for Multiple Images
What It Does: Arranges multiple images in a grid with rounded corners.
How to Do It:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.grid-container img {
width: 100%;
border-radius: 15px;
}
Explanation: Using CSS Grid, you can arrange multiple images in a responsive grid layout with rounded corners, making your gallery look clean and organized.
17. Neumorphism Effect
What It Does: Creates a soft, embossed look.
How to Do It:
.img-container {
border-radius: 15px;
box-shadow: 8px 8px 16px #b8b9be, -8px -8px 16px #ffffff;
overflow: hidden;
background: #e0e0e0;
}
.img-container img {
border-radius: 15px;
display: block;
}
Explanation: Neumorphism combines shadows and highlights to give the image container a soft, 3D look, which is very trendy in modern UI design.
Conclusion
By combining border-radius with these additional CSS properties, you can create truly stunning image effects that enhance user interaction and visual appeal. Experiment with these techniques to see what cool and creative designs you can come up with. If you have any more questions or need further assistance, just let me know. Happy coding!