I am trying to style a border that has a bevel on both the outer and inner edges, giving the appearance of a 3D projection, like the window frames in the image. However, the typical border styles available in CSS such as solid, dashed, and groove do not fit my needs. Is there a way to style this type of border in HTML or CSS?
Yes.
Follow the basics of the reply I posted a few hours ago.
http://forum.bubble.io/t/i-want-to-change-boarder-radius-of-element-dynamically/238519/7
You can style anything you want in CSS, just make sure you use the ! important tag to override bubble.
Thank you @troy.roberge but I still donāt know how to make the bevel on both sides. {border-style: ridge;} is the closest thing but that creates a kind of triangle. To be clear, this is what I need;
This was created with a convoluted series of groups within Bubble, but I wonder if it is possible to do this in CSS, and how would it be done?
In your initial message you asked if there was a way, so yup there is. I now understand that your want to know how. Well that will take some trial and error on your part. What is the use case?
Here is a basic generator I found. Donāt forget to use the ! important tags after each clause, just in case.
You will need to find a few CSS resources online to get you what your need, but itās certainly doable.
Thanks for the link, unfortunately that link (as with every other one I have found) only has the same set of 8 border types. I have searched for a couple days and there doesnāt seem to be a standard border which does what I want, so I need to create a bespoke one but I donāt know CSS. I donāt need to learn CSS as aside from this little issue I have no other need for it, I guess I need someone to literally type the CSS for me. Iāve tried ChatGPT AI code generator but it canāt quite work out what I need.
Lol so you want someone to do work that you donāt want to learn on your own?
Sorry, done helping. Thatās not what this forum is for.
@troy.roberge You are incorrect in thinking that this forum is limited to specific types of questions. This forum is arguably specifically intended for non-coders who need help with coding tasks. I do not want to learn CSS in order to add a single border, of course, if I needed to know more CSS, I would have to learn it, but I only need a single border in CSS.
Many times, I have provided answers to questions and others have done the same for me, which can be copied. This forum is the friendliest Iāve ever found and I appreciate your help, but itās advised not to lash out with these types of comments. Simply refrain from helping if you disagree with the questionās intent.
This is the last reply I will make, but when someone says, āI donāt want to learn, I want someone to do it for meā, that is not what people want to advocate here.
Good luck.
People come to Bubble because they donāt want (or have time) to learn php. What do you think the value proposition of Bubble is? Anyway, I donāt like arguments in public.
For anyone interested, I finally worked out how to get the AI bot to understand my requirements (feel free to copy/paste) lol.
It honestly took ages to get the thing to understand, spend hours on it yesterday but now I think I can āspeak itās languageā! I asked for this; An HTML page with an inner and outer border, with padding between the two borders.
Here is the code to generate the border I was after:
<html>
<head>
<style>
.outer {border-style: outset; border-width: 5px; border-color: lightgray; padding: 20px; background-color: lightgray;}
.inner {border-style: inset; border-width: 5px; border-color: lightgray; padding: 20px; background-color: #e6e6e6;}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Content goes here
</div>
</div>
</body>
</html>for anything css/js related https://developer.mozilla.org/ is your best friend.
Just search for āborder mdnā on google and you get border-style - CSS: Cascading Style Sheets | MDN with examples of inset and outset border styles.
Awesome thanks, just had a look, really nice resource 