The border property you never knew you needed

Поделиться
HTML-код
  • Опубликовано: 23 дек 2024

Комментарии • 188

  • @zachjensz
    @zachjensz 2 года назад +324

    This is borderline fantastic

    • @KevinPowell
      @KevinPowell  2 года назад +55

      🥁

    • @randomuploaderguy
      @randomuploaderguy 2 года назад +19

      This comment should be pinned for posterity :P

    • @sonjadilan777
      @sonjadilan777 2 года назад +1

      🤣💪🏾🔥😎

    • @OLDACCOUNT_notfireman
      @OLDACCOUNT_notfireman 2 года назад +4

      No, this is borderline godtier. Saying borderline fantastic is the same as saying barely fantastic

    • @kdot78
      @kdot78 2 года назад +8

      @@OLDACCOUNT_notfireman okay Shakespeare

  • @Luxalpa
    @Luxalpa 9 месяцев назад +6

    5:38 "This isn't what you'd think it is" - that's a great description of CSS properties in general!

  • @kncle
    @kncle 2 года назад +13

    This is so cool. I want to see more of these little design hacks for common designs patterns.

  • @sergnio
    @sergnio 2 года назад +4

    I couldn't figure out why it wasn't working, but of course coming to a Kevin Powell video you learn exactly what you need

  • @graysonpeddie
    @graysonpeddie 2 года назад +10

    I have just implemented the transparent gradient border in my website thanks to you! Awesome! I actually use it in an :after element behind the semi-transparent background for my articles with the z-index set to -1. 😃

  • @Vattevaii
    @Vattevaii 2 года назад +2

    Damn .. been searching all over the place for gradient borders.. I just used to add multiple backgrounds with proper positioning and size to emulate gradient borders.. or just layer ::before to get gradient border..
    This was too informative
    Love you bro

  • @chrisicotec7652
    @chrisicotec7652 2 года назад

    css used to stress me out, this channel makes it much less scary and confusing

  • @shakirdodhiya8770
    @shakirdodhiya8770 2 года назад +3

    Nice content Kevin
    I also used gradient borders in some of my recent projects
    One drawback is that it doesn't work with border radius

  • @sharkinahat
    @sharkinahat 2 года назад +1

    Remember when border-radius wasn't a thing and everything had a gif border-image? Pepperidge farm remembers.

  • @peternicholson26
    @peternicholson26 2 года назад

    that was some pretty slick border action. I need to inject this knowledge into the designers at work so they only design based off the things I already know ha

  • @tworsfeline2302
    @tworsfeline2302 2 года назад

    I like that that CSS property now exists.
    ("that that" isn't a typo, it is weird grammar in English)

  • @ДианаДиана-с1г
    @ДианаДиана-с1г 2 года назад

    Perfect, I am coding my small project now, as I am not a designer i try to make things look simple, but i always want to add some artistic touch to them. The transparent border is something i need)

  • @StefanoVolponi
    @StefanoVolponi 2 года назад

    The first 30 seconds are enough to make me feel oooooooooooooold

  • @YurijVolkov
    @YurijVolkov 2 года назад

    Last time I use border-image when it was as an exercise in a paper tutorial book and it was almost useless in real world. But now, with a gradient, that might be usable! Thanks!!

  • @anafro_ru
    @anafro_ru 4 месяца назад

    border-image is like that one candy on the bottom of the package - you don't really expect so much from it, its name is kind of boring and not really promising, but when you unwrap it, you realize - it is the most delicious candy of all times

  • @Kawlinz
    @Kawlinz 2 года назад

    4:24 - "I mucked up my bottom a little bit"
    I do that from time to time - it's fine

  • @paulooliveira8976
    @paulooliveira8976 10 месяцев назад

    Welcome to the styling side!!

  • @nicholaskane69
    @nicholaskane69 2 года назад

    I use these to put 'Final Fantasy 7'-style borders around UI elements on my Twitch streams. They're great!

  • @AlvinIsChipmunk
    @AlvinIsChipmunk 2 года назад +3

    for gradient border i always use background: linear-gradient and changing border to transparent.
    background:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(to right, #9c20aa, #fb3570) border-box;
    border: 10px solid transparent;
    first linear-gradient is basically your background color to fill only the padding box while sitting on a second linear gradient which is the gradient that fills to the whole border area.

    • @Way_Of_The_Light
      @Way_Of_The_Light 2 года назад +1

      Hey quick question, How do you make the border show up inside the box? Like an inner frame of a Tarot Card? 🙏

    • @AlvinIsChipmunk
      @AlvinIsChipmunk 2 года назад

      @@Way_Of_The_Light I only know how to do it with solid colors with box-shadow inset... Or a negative outline-offset.. creating a pseudo element sortof works too(by making width and height smaller than the parent)...

    • @mcnagynorbi
      @mcnagynorbi 2 года назад

      @@Way_Of_The_Light You can have two borders actually. You can use outline as a second border around it.

    • @Way_Of_The_Light
      @Way_Of_The_Light 2 года назад

      I see, Thanks for the answers guys 🙏

  • @santhoshh4748
    @santhoshh4748 2 года назад

    These videos should be paid

  • @rodbrowning
    @rodbrowning 2 года назад

    I think this is the only video about this subject in the internet

  • @askjamesss
    @askjamesss 2 года назад +1

    KP CSS Tutorials as it's finest. ☝️🙌

  • @nonchain
    @nonchain 2 года назад

    Man you just saved my life with this tutorial
    Thanks a lot

  • @MrAsgardian1987
    @MrAsgardian1987 2 года назад

    You just saved me some serious design headache (Y)

  • @StevenDavisPhoto
    @StevenDavisPhoto 2 года назад

    Omigosh! I didn't know this was doable! This video would have helped when I needed to do a gradient border a while back. Dang. Haha.

  • @balubalaji9956
    @balubalaji9956 2 года назад

    enjoyed the examples at the end.. just wow

  • @bilatungdulang9708
    @bilatungdulang9708 2 года назад

    Really fantastic thing from border image, thanks for sharing my friend

  • @giorgiteliashvili5268
    @giorgiteliashvili5268 9 месяцев назад +1

    Thanks for your explanation, very clear and helpful, fantastic!

  • @eothica
    @eothica Год назад

    lol saved me hours with that mozilla border image generator

  • @angrytvrobot6130
    @angrytvrobot6130 2 года назад

    Holy crap this is mindblowing. Thank you! I'm going to mess around with this on my current project.

  • @chrisozz2007
    @chrisozz2007 2 года назад

    this was great. was able to use it immediately at work. Thanks

  • @j7coder
    @j7coder 2 года назад

    Amazing!!
    You make me fall in love with css!

  • @__anasmustafa
    @__anasmustafa 2 года назад

    Get well soon Kevin!
    Great content as always!

  • @WarframeCrunch
    @WarframeCrunch 2 года назад

    Thanks for that, I didn't known about border-image

  • @solaarsslave
    @solaarsslave 2 года назад

    i almost always learn something new, thanks!

  • @SnehilCodes
    @SnehilCodes 2 года назад +1

    Still looking forward to the day when border-image becomes compatible with border radius ;-;

  • @sabiruli
    @sabiruli 2 года назад

    This is amazing! Thanks @Kevin

  • @thedelanyo
    @thedelanyo 2 года назад

    Your video contents are top notch Sir . Thanks.

  • @tinguyen_dev
    @tinguyen_dev Год назад

    How about the gradient border with radius? And transparent background also.

  • @anaselhassani2545
    @anaselhassani2545 2 года назад

    THANK YOU SO MUCH FOR THIS VIDEO

  • @ahmedharb88
    @ahmedharb88 2 года назад +5

    great explanation Kevin ♥
    so could you provide us a tutorial about : circular progress border using CSS

    • @KevinPowell
      @KevinPowell  2 года назад +4

      We could do something fun with that!

    • @ahmedharb88
      @ahmedharb88 2 года назад

      @@KevinPowell thanks a lot for that

  • @j.almadhaji
    @j.almadhaji 2 года назад

    Well, that's new
    Thank you Kevin

  • @catholic_zoomer_bro
    @catholic_zoomer_bro 2 года назад +2

    Watching you makes me want to ditch tailwind and just use css

    • @KevinPowell
      @KevinPowell  2 года назад +4

      That just made my day 😅

  • @GauravKumar-ue7nz
    @GauravKumar-ue7nz Год назад

    Thanks Kevin

  • @vectork3
    @vectork3 11 месяцев назад

    This is really cool. Thank you sir!

  • @Kiev-in-3-days
    @Kiev-in-3-days 2 года назад

    "The border property you never knew you needed"
    My negative side: "May be because we actually didn't need it?"
    My other side: "Just watch and shut up. You might actually happily use that one day".

  • @TheRalic
    @TheRalic 2 года назад +1

    Excellent video, never used borders like that and I think I will start using it from now on ^_^

  • @mmuralikrishna2881
    @mmuralikrishna2881 2 года назад

    If am using border gradient doesn't support border radius. Any solution for this i dont want background-image gradient with border radius.

  • @Jakiita1
    @Jakiita1 Год назад

    I've been stuck trying to figure out an animated border-gradient with a Border radius while keeping a transparent background. I've seen ur animated border gradient video but with that method it looked like you need a 'background' for the card at the front to hide the gradient thats behind it.
    Is there a way to make an animated border with round corners? The SVG videos gave me the impression the gradient cannot be done in the CSS only in HTML, am I understanding that right?

  • @NotKyleChicago
    @NotKyleChicago 2 года назад

    If you used "fill", would there be a lime green semicircle in the top left?

  • @mikodizon8322
    @mikodizon8322 2 года назад

    great video! Thanks kevin!

  • @juggles5474
    @juggles5474 5 месяцев назад

    amazing video, thank you!

  • @Rajendrakumar-zu4st
    @Rajendrakumar-zu4st Год назад

    how to give border radius while using the linear gradient one?

  • @MichaelWestcott
    @MichaelWestcott 2 года назад

    Using border-image was pretty common before CSS3

  • @onnot701
    @onnot701 2 года назад +1

    I wonder if you design straight in css and hrml or still use figma?

  • @murshid9033
    @murshid9033 2 года назад

    Can you do a video on animating gradient borders

  • @Eleanor8965
    @Eleanor8965 2 года назад +1

    This was great! I am curious however on how you'd mix this with adding a border radius as well. It seems that the two "fight" one another.

    • @KevinPowell
      @KevinPowell  2 года назад +2

      Yeah it's one or the other with border-image :)

    • @Eleanor8965
      @Eleanor8965 2 года назад +1

      @@KevinPowell Thank you for this video and for your response. Also, I was the guy who emailed you last week about this very topic. This channel is awesome!

    • @captuhu
      @captuhu 2 года назад +2

      right now if you want a round corner it would have to be included as part of the image. I have a github issue open with the CSSWG on making gradient border-image with work with border-radius.

  • @theroboticscodedepot7736
    @theroboticscodedepot7736 3 месяца назад

    Would this CSS work when creating an image border?
    I've tried it and it does NOT seem to work for an image. For some reason it does not bring in the image even though I tested the URL in a browser and that does open the image.

  • @matthewblasco4720
    @matthewblasco4720 2 года назад

    🤩🤩🤩🤩 ty for making css awesome

  • @sheezanawaz476
    @sheezanawaz476 Год назад

    How can I do the property of border-radius? when I give the border radius it effects the background color not linear-gradient border

    • @KevinPowell
      @KevinPowell  Год назад

      No border radius with the images sadly, you'd have to set the corners of the image up to be rounded

    • @sheezanawaz476
      @sheezanawaz476 Год назад

      @@KevinPowell but I am using linear gradient color for border, not image

  • @madameknees
    @madameknees 2 года назад

    How does this interact with border-radius, and how many of these properties are animatable?

  • @blackcheetah4550
    @blackcheetah4550 Год назад

    Very useful video, thanks

  • @jameswrightson744
    @jameswrightson744 2 года назад

    Also known as a 9 slice on video games 🔥

  • @smsmsmow4109
    @smsmsmow4109 Год назад

    wow >> you are amazing

  • @SiJayDelphin
    @SiJayDelphin Год назад

    Hi Kevin, great video. I have a question, is it possible to do the last border and both sides?

  • @editin232
    @editin232 Год назад

    But how do you do it on rounded corners?

  • @lazy07
    @lazy07 2 года назад

    Nice video will help me in my next Website 👍

  • @cacowen
    @cacowen 2 года назад

    Thanks for the video. Good stuff. Would this be a good use case for throwing a loading "spinner" on a button? I played around a bit and think the Gradient Example 2 approach with an animation altering the deg would make it look like a loading bar and perfect for a button. Throw the loading class on the button when it is clicked, and remove that class when the process is finished.

    • @crifox16
      @crifox16 2 года назад

      yeah that's what i was thinking too, especially with example three with a rotate animation

  • @haliszekeriyaozkok4851
    @haliszekeriyaozkok4851 2 года назад

    Very beautiful.

  • @luc122c
    @luc122c 2 года назад

    This concept is called 9-slice scaling. en.wikipedia.org/wiki/9-slice_scaling I find legacy applications tend to heavily use background graphics, and this technique helps make them responsive.

  • @clamhammer2463
    @clamhammer2463 2 года назад

    Could you use container queries to make slice more dynamic?

  • @hamidulloahmedov8928
    @hamidulloahmedov8928 2 месяца назад

    how can i make it circle, i mean does border-radius work on that ????

  • @wayneswildworld
    @wayneswildworld 2 года назад

    Awesome video!!!

  • @skillzorskillsson8228
    @skillzorskillsson8228 2 года назад

    It seems like its not possible for border-image to work if you have border-radius on your telement. Or well, the border-image work but it does not follow the shape of the element...

    • @KevinPowell
      @KevinPowell  2 года назад

      Yeah it's one or the other, but you're image can have round corners if your already going down that route

  • @oleksandrvorovchenko8674
    @oleksandrvorovchenko8674 2 года назад

    Thanks! Very useful, as usual.

  • @markosabados390
    @markosabados390 2 года назад

    how to make curve border top left corner in example 3, because border radius isn't working and i don't know why

    • @KevinPowell
      @KevinPowell  2 года назад

      Can't use this and border radius, it's one or the other sadly... So you need to have the corners round in the image itself

    • @markosabados390
      @markosabados390 2 года назад

      @@KevinPowell ok thanks amazing channel btw :)

  • @kbhkv-kbshkv
    @kbhkv-kbshkv 10 месяцев назад

    What about border-radius with this properties?

  • @COLI_ALVAREZ
    @COLI_ALVAREZ Год назад

    Hello! thanks for the video, very help full! which is the right size for an image not to pixel when using this property?

  • @BlackCrypt
    @BlackCrypt 2 года назад

    Who does your back-end?

  • @n0n1m
    @n0n1m 2 года назад

    Mind blowing and really beautiful:)

  • @realdev8940
    @realdev8940 2 года назад

    Can you please explain how it works for circular divs or images.

  • @tcob78vaibhavwable95
    @tcob78vaibhavwable95 10 месяцев назад

    how to do it for rounded borders

  • @hybridboy9_9
    @hybridboy9_9 2 года назад

    How can we do animation on it

  • @TheMetalMag
    @TheMetalMag 2 года назад

    is there a way to have one line rather than writing border-image several times?

  • @estonian44
    @estonian44 2 года назад

    dang, u r wizard

  • @overwatch9659
    @overwatch9659 2 года назад

    Great video 🙏🏾🖤

  • @hoffix0123
    @hoffix0123 2 года назад

    does it work with border-radius?

  • @Natsuu0101
    @Natsuu0101 2 года назад

    why border radius doesn't apply to this?

  • @drenskywalker
    @drenskywalker 2 года назад

    ✨ magic ✨

  • @rajarorauk
    @rajarorauk 2 года назад

    This is brilliant, and very timely for a project I'm working on right now. However I'm struggling a little - I'm using a png with a design on a white background for border image, but my border seems to get a small gradient. I can't work out why or how to remove it. Any advice please?

    • @rajarorauk
      @rajarorauk 2 года назад +1

      Don't worry. I fixed it. Only took 2 hours! The gradient was a box shadow from the div above. Obvs really.

  • @piterparker990
    @piterparker990 2 года назад

    its work thx brother 🙏

  • @Djuka7
    @Djuka7 2 года назад

    I really enjoy your tutorials, voice and positive energy, God bless you brother🙏💙

  • @rohanMJ
    @rohanMJ Год назад

    Why this is not working correctly in safari browser?

  • @randomuploaderguy
    @randomuploaderguy 2 года назад

    Would it not be better to pre-slice the corner in Photoshop, and use that as the border-image instead of the full thing? It seems to just mirror the corner over and over to create the border so why not save on resources?

    • @captuhu
      @captuhu 2 года назад +1

      the browser does the slicing for you. These border-image-sources don't tend to be so large that the repetition really causes an issue.

    • @KevinPowell
      @KevinPowell  2 года назад

      Like captuhu said, as long as the image isn't some giant, bloated image that you're using for no reason, I don't really see the need to pre-slice it. You'll hopefully have a pretty optimized image to start with. I'd start with general image optimization, and if I was really needing to cut down a few more kb, then sure.

    • @captuhu
      @captuhu 2 года назад

      also SVG is your best friend for these images. Super small file size and they scale well so you don't need to tweak them for 2x , 3x

  • @Way_Of_The_Light
    @Way_Of_The_Light 2 года назад +1

    Hey quick question, How do you make the border show up inside the box? Like an inner frame of a Tarot Card? 🙏

    • @KevinPowell
      @KevinPowell  2 года назад +1

      The image source could have a transparent gap on the outside for the spacing you want there, and then the image/pattern is inset a little bit, then it's just playing with the slicing

    • @Way_Of_The_Light
      @Way_Of_The_Light 2 года назад

      @@KevinPowell I see, thank you so much for replying 🙏

  • @tcgvsocg1458
    @tcgvsocg1458 2 года назад

    genius! thx a lot

  • @razorjhon2622
    @razorjhon2622 2 года назад

    how can we animate the linear gradient border , thank you for this i almost forgot how to use border and this video reminded me of it ^^

    • @KevinPowell
      @KevinPowell  2 года назад +2

      Because it's an image-source, just like a background-image, we can't animate it sadly. Or well, we could with @property and custom properties, but the support isn't very good.

    • @stephanvandermeijden289
      @stephanvandermeijden289 2 года назад

      @@KevinPowell Should be possible with JavaScript, right? Doesn't sound like a good idea, though.

  • @arshad1781
    @arshad1781 2 года назад

    Thanks 👍

  • @VasilyPavlik
    @VasilyPavlik 2 года назад

    Typing "Brilliant!!!" and start watching the video :)

  • @aymanayman8209
    @aymanayman8209 2 года назад

    Sir, I would like to see you create a 2D intro with css, and by the way its because of you I loved css. Thank you for the amazing videos.