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
borderelements? Well fear not, today I'm going to walk you through theborder-imageCSS 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: https://www.blog.duomly.com/css-border-with-examples-tutorial/
📋✍️ 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 doubleborder-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: https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
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 facebook.com.
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 :
https://www.futurecodersweb.com/2021/06/button-with-animated-border-using-html.html
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!
