SlideShare a Scribd company logo

Css border examples

•
•
�
💾 Radek Fabisiak

Hi guys, today we will talk about… BORDERS! The CSS border is something that you will most probably use almost every day, if you’re front-end developer, of course. I’ve found a few useful (some more, some less, some just funny) tips and tricks that you can use in your project.

Related slideshows

How to make your css not suck
How to make your css not suckHow to make your css not suck
How to make your css not suck
 
CSS Selectors
CSS SelectorsCSS Selectors
CSS Selectors
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheets
 
1 of 14
Download to read offline
CSS Border With Examples Tutorial This content was originally published at: https://www.blog.duomly.com/css-border-with-examples-tutorial/ ***
Introduction to CSS border examples Hi guys, today we will talk about… BORDERS! The CSS border is something that you will most probably use almost every day, if you’re front-end developer, of course. I’ve found a few useful (some more, some less, some just funny) tips and tricks that you can use in your project. Let’s start!
If you prefer video here is the youtube version. Wystąpił błąd. CSS Border examples youtube lub włącz JavaScript, jeśli jest wyłączony w Twojej przeglądarce.
1. Animated CSS border What to do when we would like to make our item more visible? Let’s animate it! We can animate our borders, even without changing the size of the element, and it’s very easy. To do that, we just need to create a custom keyframe for the animation and use it in the animation param inside our element’s CSS code. Let’s take a look at the example: https://codepen.io/duomly/pen/OJyzzpN
2. CSS Border images Have you ever imagine donuts around your element? Now you can add them by pure CSS without too much effort. To do it, you need to use the border- image attribute in your element’s CSS code. Let’s take a look at the example: https://codepen.io/duomly/pen/PoPEEVp
3. Snake style CSS border What if we need a double-color ultra visible border? We can wear a snake uniform and color it however we want. Let’s try the code from the example: https://codepen.io/duomly/pen/LYpeded
4. Stairs Style CSS border Have you ever tried to add 3d style border around your div? Adding some multi-color depth into our element is very easy. We simply need a few box-shadows in the CSS. Let’s test our example! https://codepen.io/duomly/pen/MWarGeO
5. Only shadow CSS border Sometimes we need to add a border to the ready design, but adding a few more pixels would be a bit problematic. It could change the position of the elements. Not anymore! Now we can use box-shadow around our element as a border, take a look in the code. https://codepen.io/duomly/pen/MWarGEQ
6. CSS border with shadow and outline We can achieve a similar effect to the snake-style in a few ways. Next, one of them is mixing box-shadow and outline param in the CSS of our element. Let’s take a look. https://codepen.io/duomly/pen/pojpVOL
7. Few shadows and outline css border We can even create a few colors and elements in our border. To do that, we need to mix box-shadows and outline, like in the example below. Let’s experiments with that a bit. Codepen: https://codepen.io/duomly/pen/gOaozEg
8. Double CSS border with box-shadow We can also mix just a border with some box-shadow and outline. That will create a lovely effect of a line with spikes, like in the example below. Let’s check the code! https://codepen.io/duomly/pen/YzyYLmq
9. Multi-color CSS border And what if we would like to color our borders a bit more than in the previous examples? We can even set up every wall of the element in a different color. To achieve that, we will need some custom background with the gradient inside. Take a look at the example below. https://codepen.io/duomly/pen/ExVoRjq
Conclusion of CSS border examples Ok, it was the last one of the ideas for now. I hope you like them, and those few will be useful for you. Feel free to test them, experiment, and show in comments what ideas you found to make borders different. Congratulations, you are the borders expert now! Thanks for Reading, Radek from Duomly
Table of contents: • Introduction to CSS border examples • 1. Animated CSS border • 2. CSS Border images • 3. Snake style CSS border • 4. Stairs Style CSS border • 5. Only shadow CSS border • 6. CSS border with shadow and outline • 7. Few shadows and outline • 8. Double CSS border with box-shadow • 9. Multi-color CSS border • Conclusion of CSS border examples

More Related Content

Css border examples

  • 1. CSS Border With Examples Tutorial This content was originally published at: https://www.blog.duomly.com/css-border-with-examples-tutorial/ ***
  • 2. Introduction to CSS border examples Hi guys, today we will talk about… BORDERS! The CSS border is something that you will most probably use almost every day, if you’re front-end developer, of course. I’ve found a few useful (some more, some less, some just funny) tips and tricks that you can use in your project. Let’s start!
  • 3. If you prefer video here is the youtube version. Wystąpił błąd. CSS Border examples youtube lub włącz JavaScript, jeśli jest wyłączony w Twojej przeglądarce.
  • 4. 1. Animated CSS border What to do when we would like to make our item more visible? Let’s animate it! We can animate our borders, even without changing the size of the element, and it’s very easy. To do that, we just need to create a custom keyframe for the animation and use it in the animation param inside our element’s CSS code. Let’s take a look at the example: https://codepen.io/duomly/pen/OJyzzpN
  • 5. 2. CSS Border images Have you ever imagine donuts around your element? Now you can add them by pure CSS without too much effort. To do it, you need to use the border- image attribute in your element’s CSS code. Let’s take a look at the example: https://codepen.io/duomly/pen/PoPEEVp
  • 6. 3. Snake style CSS border What if we need a double-color ultra visible border? We can wear a snake uniform and color it however we want. Let’s try the code from the example: https://codepen.io/duomly/pen/LYpeded
  • 7. 4. Stairs Style CSS border Have you ever tried to add 3d style border around your div? Adding some multi-color depth into our element is very easy. We simply need a few box-shadows in the CSS. Let’s test our example! https://codepen.io/duomly/pen/MWarGeO
  • 8. 5. Only shadow CSS border Sometimes we need to add a border to the ready design, but adding a few more pixels would be a bit problematic. It could change the position of the elements. Not anymore! Now we can use box-shadow around our element as a border, take a look in the code. https://codepen.io/duomly/pen/MWarGEQ
  • 9. 6. CSS border with shadow and outline We can achieve a similar effect to the snake-style in a few ways. Next, one of them is mixing box-shadow and outline param in the CSS of our element. Let’s take a look. https://codepen.io/duomly/pen/pojpVOL
  • 10. 7. Few shadows and outline css border We can even create a few colors and elements in our border. To do that, we need to mix box-shadows and outline, like in the example below. Let’s experiments with that a bit. Codepen: https://codepen.io/duomly/pen/gOaozEg
  • 11. 8. Double CSS border with box-shadow We can also mix just a border with some box-shadow and outline. That will create a lovely effect of a line with spikes, like in the example below. Let’s check the code! https://codepen.io/duomly/pen/YzyYLmq
  • 12. 9. Multi-color CSS border And what if we would like to color our borders a bit more than in the previous examples? We can even set up every wall of the element in a different color. To achieve that, we will need some custom background with the gradient inside. Take a look at the example below. https://codepen.io/duomly/pen/ExVoRjq
  • 13. Conclusion of CSS border examples Ok, it was the last one of the ideas for now. I hope you like them, and those few will be useful for you. Feel free to test them, experiment, and show in comments what ideas you found to make borders different. Congratulations, you are the borders expert now! Thanks for Reading, Radek from Duomly
  • 14. Table of contents: • Introduction to CSS border examples • 1. Animated CSS border • 2. CSS Border images • 3. Snake style CSS border • 4. Stairs Style CSS border • 5. Only shadow CSS border • 6. CSS border with shadow and outline • 7. Few shadows and outline • 8. Double CSS border with box-shadow • 9. Multi-color CSS border • Conclusion of CSS border examples