More Control Over CSS Borders With background-image

You can make a typical CSS border dashed or dotted. For example:

.box 
   border: 1px dashed black;
   border: 3px dotted red;

You don’t have all that much control over how big or long the dashes or gaps are. And you certainly can’t give the dashes slants, fading, or animation! You can do those things with some trickery though.

Amit Sheen build this really neat Dashed Border Generator:

The trick is using four multiple backgrounds. The background property takes comma-separated values, so by setting four backgrounds (one along the top, right, bottom, and left) and sizing them to look like a border, it unlocks all this control.

So like:

.box 
  background-image: repeating-linear-gradient(0deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(90deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(180deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(270deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px);
  background-size: 3px 100%, 100% 3px, 3px 100% , 100% 3px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;

I like gumdrops.

For more updates check below links and stay updated with News AKMI.
Life and style || E Entertainment || Automotive News || Science News || Tech News || Lifetime Fitness || Giant Bikes

Source

Related News  ExTiX 21.1 Deepin Edition is a beautiful Linux desktop in need of some polish
Show More

Related Articles

Back to top button

usa news wall today prime news newso time news post wall

Close