Hello,
If I want to add flourishes to borders is there a way to do this in native css? Would I add a full length border and design it with css? If so does anyone have any tips on how to do this?
There’s no way I know of to alter the appearance of the standard CSS borders other than by using the various border styles that are available. I’ve seen people do some pretty amazing, unexpected things with CSS, so I’m not going to say it’s impossible (maybe using combinations of radius’s and psudo classes), but it would certainly present a time consuming challenge that I wouldn’t get into unless I was getting paid by a client for something I’d consider “very custom” in terms of coding.
The more simple way would be to simple create your flourishes as .svg files in a program like Illustrator, and then use a combination of divs and positioning to either make them work in concert with the standard CSS borders, or just design the entire border for your page/object/image/whatever as an svg object. Or if it’s for a picture, make it part of the picture.
If you look at this website,
which I built about 9 years ago (and which is about to be replaced with a new, responsive, BSS-built site) you can see I added a lot of fancy Asian “kung fu” style borders. They’re all images though, and since it’s a static (non-responsive) website, there was no concern about how they’d have to move, resize, etc. So on the client’s new site, I simply told him, “no can do.” It’s old style web design, and we don’t offer it anymore. And frankly, it looks overdone and cheesy in 2020. But that’s how we built websites 10-15 years ago.
You would need to use relative positioning to do this and either an image or if you’re that good at CSS that you can manipulate a nice flourish have at it. I did this with images on a couple of my sites and it works pretty well. I don’t think you need to do anything special, just using the relative positioning and positioning the flourishes within the container/row/col you want them in should work fine.
Perhaps you are looking for css border-image, that allows a modern approach to custom borders.
You also mentioned full length, you can also supply a background image to a hr tag. Otherwise I think you will need to be more clear in describing what you are hoping to achieve.
Oh thanks @bss_user! I wasn’t aware of that option thinks she better go get some update refreshers on CSS features lol. I probably should, I slacked a bit there 
Appreciate the link though thanks much!
Thank you all for this info!