CSS Border Guides
Understanding all things border from
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 properties. For all things CSS, check out the CSS tag! Please contribute more posts like this to help your fellow developer in need.
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:
Have you ever wanted a cooler border than what you can get from stacking
borderelements? Well fear not, today I'm going to walk you through the
Hello, guys in this tutorial we will create an animated snake border using HTML & CSS.
For the same side project I created the fully-responsive sticky note, I also created a hand-drawn border effect and animation:
This article was originally published at: https://www.blog.duomly.com/css-border-with-examples-tutorial/
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.
Let's talk about border-radius.
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!
In this tutorial I want to share with you my personal approach to design a triangle with a double border in CSS.
Today I learned about the CSS border-collapse property: https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
Have you been given the advice to use
box-sizing: border-box;but not completely understand what it was doing for you?
This snippet is quite hefty CSS, and if you want to learn how it works first, head over to read Ahmad's post. It's a good hack, but it is also unreadable. Even if you understand this
border-radiusdeclaration today, you have to write a lengthy comment so that your future self won't travel back in time to have a word with you.
When nesting elements with a
border-radius, I found this formula, which I implemented in the Codepen below:
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!
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.
Let's learn about CSS border with images
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!