How was this border decoration done on this website?
https://www.ectogasm.net/
Is it possible in Webflow?
hi @Camelia_Filip if you mean border on small images than they use SVG.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 616" preserveAspectRatio="none" class="product-preview-border__svg __WebInspectorHideElement__"><path fill-rule="evenodd" d="M235.959 1c.025-.306.039-.616.041-.928-.018 2.098-.803 5.042-2.665 7.481C231.437 10.041 228.42 12 224 12c-4.42 0-7.437-1.96-9.335-4.447C212.782 5.086 212 2.103 212 0h1c0 1.897.718 4.664 2.46 6.947C217.187 9.209 219.92 11 224 11c4.08 0 6.813-1.79 8.54-4.053C234.282 4.664 235 1.897 235 0h208v5h5v606h-5v5H5v-5H0V5h5V0h207c0 .337.014.67.041 1H6v4h207.088c.157.342.33.676.517 1H6v604h436V6H234.395c.187-.324.36-.658.517-1H442V1H235.959ZM6 611v4h436v-4H6ZM447 6h-4v604h4V6ZM1 6h4v604H1V6Zm11 6h2v2h-2v-2Zm0 590h2v2h-2v-2ZM436 12h-2v2h2v-2Zm-2 590h2v2h-2v-2Z" clip-rule="evenodd"></path></svg>
You can always use DevTools to investigate websites
I mean border on containers, images, even the popup has custom borders.
I looked into it with inspect element but I’m not a developer so it’s hard for me to figure it out.
most artistic borders are SVG
button borders are done with pseudo classes :before or :after
That is absolutely fine as every developer started with no knowledge but willing to learn. You can always invest your time and money to get knowledge to become a web developer.
If you do not have time or will to learn you can always hire a developer to create website for you.
Sorry to ask, but if they are SVGs, how are they dynamic based on screen size? And how are the corners cut into small squares as well? By placing four SVGs in the corners and one on top center? Also, they seem to be transparent to me.
For the yellow popup, the corners cut are definitely transparent, not solid color. I can see the content of the website behind them. How is that possible with SVGs?
hi @Camelia_Filip I’m sorry but it will be very hard for me to explain everything in written. At first it will be for me time consuming and unnecessary ( as everything is already on internet) and at second, it will be for you very hard to understand 100% what I will be explaining especially when you have not minimal basic HTML, CSS knowledge.
Anyway, as I have mentioned most of these are SVG rest are other techniques as ::before and/or ::after, clip-path just to name a few or their combinations.
I as this forum is about Webflow platform issues and not about teaching CSS basics, be able to understand and answer all your questions related to your request I will suggest you can start to learn:
- what are Dev tools - be able check how things are build what is used etc.
- what is SVG - to understand what SVG is and how it differ from other pixel based graphics
- what is CSS positioning (relative, absolute. …)
- what is a clip path and how it can be used to “cut” element into shape
- …rest
All these are easy to find on web using your favourite browser.
Good luck on your journey. 
I’m sorry for inconveniencing you and wasting your time. I’ve searched for things before here on discourse and I’ve seen people are asking about custom code with Webflow and are receiving help.
I know what 2, 3, and 4 are. I just want to find some kind of tutorial or more help because even though Webflow is a zero-code tool, it is used by so many developers that are happy to share their knowledge.
Im sorry for you but this WF marketing slogan is pure lie to get a new clients on board. Yes you can “push rectangles around the screen” only with WF UI tools but thats it.
Even if “Webflow is a zero-code tool” will be true the magic marketing word"no-code" is not equal “no knowledge”, unfortunately many new WF users will misunderstand difference between these. Maybe it is because of another thing that WF says: “You can build with WF websites without any knowledge.” That is partially true, but results are discussable.
We are here to help and we do as much as we can and we do help even with custom code. But WF is only UI and use mostly Web standards so all can be found on internet as your request is not WF specific.
You can also check “Made in Webflow” where you may find some examples how other WF users use SVG.
There is many tutorials in written or video form staring with WFU and I believe there is many tutorials about SVG, CSS, HTML etc.
How I can help you to understand SVG (Scalable Vector Graphics) ? All these informations are on internet.
I really do not know how I can help you more as I have already pointed you right direction and you have website example where you can study how to.