grid ke border frame me kuchh design add krna hai

 

Zaroor Sansu! Grid ke border/frame me agar tum design, style, ya effects add karna chahte ho, toh kuch awesome ideas aur code snippets de raha hoon — jo tum Blogger pe bhi use kar sakte ho.

---

1. Gradient Border Frame

.grid-item {
  background-color: #1e1e1e;
  color: white;
  padding: 20px;
  border-radius: 12px;
  border: 3px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.grid-item::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg, #ff00cc, #3333ff);
  z-index: -1;
  border-radius: 15px;
}

---

2. Neon Border Glow

.grid-item {
  background-color: #111;
  color: white;
  padding: 20px;
  border: 2px solid #0ff;
  border-radius: 10px;
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff inset;
}

---

3. Dashed or Dotted Style Borders

.grid-item {
  background-color: #222;
  color: white;
  padding: 20px;
  border: 2px dashed #00ffcc;
  border-radius: 10px;
}

---

4. Animated Border on Hover

.grid-item {
  position: relative;
  padding: 20px;
  background-color: #1e1e1e;
  color: white;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
}

.grid-item::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(120deg, #ff00cc, #3333ff);
  z-index: -1;
  transform: scale(0);
  transition: transform 0.3s ease;
  border-radius: 10px;
}

.grid-item:hover::after {
  transform: scale(1.05);
}

---

Use in Blogger?

Agar chaho toh main is style ko ek complete responsive grid layout me embed karke Blogger HTML version ke liye bana du — ready-to-paste format me. Batao kaunsa style chahiye aur kitne grid items?

Jaise:

• Neon border?
• Gradient frame?
• Hover effect?

Ya custom design bhi bana sakta hoon.

Go to Link