How to create this border.
I’m creating a website using plain html and css and I’ve been unable to find a guide for how to create a stylized border.
14 Replies
using a background image for the page I think would be easy. Trying to use border-image css would be harder.
Or use an outline with a negative value to put it inside the blue box, then add images for each of the corner and bottom graphics, and adjust the padding and margin...
So it has multiple styles including the second border breaking the first one at the bottom i would like to also make it responsive what method do you think would work best for this requirements ?
Use a border-image for the container, and then make a container for the "made for the odin project by ..." and add another border-image for that
yep, this is definitely a case for
border-image. background-image would lead to stretched/scrunched corners depending on width and height changes.
for the box "breaking" the bottom border you'll just have to throw that blue background color on that small centered element.I would like to chime in... I would put in a border..then. Use div's in the corners that hold the images, change background color to the same as page backround which would cut the border...then you could change your images whenever without breaking your code...cheers
it's not uncommon to see it done that way but it's usually best to avoid just adding a bunch of presentational
divs if possible. I'm not really sure what the reference to "breaking your code" refers to.No that's why they asked you to clarify. Please keep it civil
the reason that it's not generally good practice to include presentational divs is that it breaks the webs fundamental concept of separation of content and style. It's also not great for folks that use screen readers to have non-semantic HTML to wait through.
on the "breaking your code" bit: Is your suggestion that the
border-image CSS property is fundamentally broken? Does it not work the way you expect it to? Is the issue that it's not included in CSS frameworks so has to be written by hand?Hey guys so I’ve been able to achieve this so far
I would like the content to remain in one page and not overflow is there a way to tie everything to the border so when resizing I can just resize the border
I used border image
I used the main attribute and would recomend the same rather than using a div
After a bit of tweaking
Still wondering if anyone knows how to pair the two borders
here's a quick demo to show a way of thinking about it: https://codepen.io/jsnkuhn/pen/XWONOvZ?editors=0100
Thank you i was able to finish the website your css really helped