Soon we’ll be able to implement multiple, comma-separated borders and outlines for a single element.…
The outline property in CSS draws a line around the outside of an element. This is quite similar to the border property, the main exception being that outline isn’t a part of the box model. It is often used for …
Let’s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can’t use any graphic editor — they need to be generated at runtime — so you have to solve it …
This little trick for gradient borders is super useful:
.border-gradient {
border: 5px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}Here’s some basic demos from our article on the subject. Sephanie Eckles was sharing around the idea …
Some HTML elements come with preset designs, like the inconveniently small squares of <input type="checkbox"> elements, the limited-color bars of <meter> elements, and the “something about them bothers me” arrows of the <details> elements. We can style them to match …
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. …
Say we want to target an element and just visually blur the border of it. There is no simple, single built-in web platform feature we can reach for. But we can get it done with a little CSS trickery.…
A little while back, I was in the process of adding focus styles to An Event Apart’s web site. Part of that was applying different focus effects in different areas of the design, like white rings in the header and …
