DEV Community

CSS Border Guides

Understanding all things border from border-style to border-size and using them all together.

This is a collection of top and trending guides written by the community on subjects related to CSS Border concepts. For all things CSS, check out the CSS tag! Please contribute more posts like this to help your fellow developer in need.

CSS Border Length

I think many of us have faced the case when the border had to be much shorter than it's parent element itself. And unfortunately it's impossible to solve this with border which, in my opinion, could be much easier and better. Currently the only way to solve this just by using some other help elements (hr, span, div, etc.) or pseudo elements:

Using SVG as a Border with CSS

Have you ever wanted a cooler border than what you can get from stacking border elements? Well fear not, today I'm going to walk you through the border-image CSS property.

Snake border animation CSS

Hello, guys in this tutorial we will create an animated snake border using HTML & CSS.

9 awesome CSS border tricks that will critically help you with styling

This article was originally published at:

📋✍️ Hand-drawn border animation using clip-path and border-radius

For the same side project I created the fully-responsive sticky note, I also created a hand-drawn border effect and animation:

CSS Double Border Radius

Yesterday we looked into making rounded corners on our boxes and even circles with border-radius. My good friend svondervoort replied you could use double border-radius. And he is right. I even used it in my Totoro example.

CSS Quickies: border-radius

Let's talk about border-radius.

Shorten the length of Border-Bottom

If you are like me, you have ran into this issue many times. Need to add a border to the bottom of an parent element but you don’t want it to be under 100% of the element.

Can this be done in css?

Which led me to the answer…YES!

How To Make A Triangle With Double Border in CSS

In this tutorial I want to share with you my personal approach to design a triangle with a double border in CSS.

TIL: CSS border-collapse

Today I learned about the CSS border-collapse property:

Meet border-box, my best friend.

Have you been given the advice to use box-sizing: border-box; but not completely understand what it was doing for you?

Conditional border-radius and three future CSS features

Ahmad Shadeed's post Conditional Border Radius In CSS is a wonderful example of CSS trickery that explains a fairly cryptic CSS snippet found on

Animating a gradient border in CSS

A while ago, I made this cool animated Multi-colour text effect in CSS.

I was re-looking this article and thought we could use some of these learnings to make a super cool animated border effect!

Nested border-radius Playground

When nesting elements with a border-radius, I found this formula, which I implemented in the Codepen below:

What is CSS Box Model ? Complete guide on Box model — Margin, Padding, Border & Content

CSS Box Model is basically a box which wraps around each HTML element. It consists of all the spaces — margins, paddings, border and the actual content itself.

Day 23/30 : Button with Animated Border using HTML and CSS

➜ Source Code :

CSS border in Images

Let's learn about CSS border with images

My Mysterious Adventures in Browser Performance, Border Radiuses, and Live Video Streams

That was the line. Commenting it out fixed all my problems. Rounded fucking corners. The main "articles list" area of the home page had a 3px border radius in the desktop view. Smaller than 850px, the list just takes up the whole screen, with no rounded corners.

Happy CSS Border coding!