Top 10 best image border CSS for blogger - Vivek GYAN 7.0

 Hello! Welcome to Vivek GYAN 7.0

If you are looking for Image Border For Blogger then this post is just for you.

Image Border For Blogger

Use this Css Code in Any Post or page Paste CSS Code above the image code

1. Image Border

  Preview

.css

<style>.separator img { border: 3px solid #FF6347; /* Tomato color */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);border-radius: 12px;
}</style>

2. Image Border

  Preview

.css

<style>.separator img {
  border: 5px double #4682B4; /* Steel blue color */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
}</style>

3. Image Border

  Preview

.css

<style>.separator img {
  border: 4px dashed #32CD32; /* Lime green color */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  background-color: #f0f0f0;
  padding: 4px;
  border-radius: 12px;
}</style>

4. Image Border

  Preview

.css

<style>.separator img {
  border: 3px groove #FF4500; /* Orange-red color */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}</style>

5. Image Border

  Preview

.css

<style>.separator img {
  border: 4px ridge #4B0082; /* Indigo color */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}</style>

6. Image Border

  Preview

.css

<style>.separator img {
  border: 5px outset #B0C4DE; /* Light Steel Blue */
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}</style>

7. Image Border

  Preview

.css

<style>.separator img {
  border: 4px solid #DC143C; /* Crimson color */
  border-radius: 25px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
  background-color: #f8f8ff;
  padding: 3px;
}</style>

8. Image Border

  Preview

.css

<style>.separator img {
  border-radius: 20px;
  background: #e0e0e0;
  box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.2),
              -7px -7px 15px rgba(255, 255, 255, 0.7);
  padding: 10px;
}</style>

9. Image Border

  Preview

.css

<style>.separator img {
  border: 3px solid #333;
  border-radius: 10px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4), 
              -5px -5px 10px rgba(255, 255, 255, 0.7);
}</style>

10. Image Border

  Preview

.css

<style>.separator img {
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}</style>

That's done!

Copyright: @ Vivek GYAN 7.0