# Bevel border CSS question

**URL:** <https://forum.bubble.io/t/bevel-border-css-question/238646>\
**Category:** Database\
**Created:** [December 26, 2022, 11:48pm UTC](https://forum.bubble.io/t/bevel-border-css-question/238646 "2022-12-26T23:48:40Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [December 26, 2022, 11:48pm UTC](https://forum.bubble.io/t/bevel-border-css-question/238646/1 "2022-12-26T23:48:40Z")

</div>

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?

![mock-window](https://us1.discourse-cdn.com/bubble/original/3X/b/8/b846cc5173afe4ed6ff0601d6ee9333b0da17a02.png)

---

<div class="post-metadata">

**Author:** ![troy.roberge](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/troy.roberge/32/51507_2.png) [@troy.roberge](https://forum.bubble.io/u/troy.roberge)\
**Post date:** [December 27, 2022, 12:07am UTC](https://forum.bubble.io/t/bevel-border-css-question/238646/2 "2022-12-27T00:07:28Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [December 27, 2022, 12:11pm UTC](https://forum.bubble.io/t/bevel-border-css-question/238646/3 "2022-12-27T12:11:52Z")

</div>

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;

![bevel](https://us1.discourse-cdn.com/bubble/original/3X/6/b/6bb0f198da5e70cf4803200387fec35b9953283e.png)

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?

---

<div class="post-metadata">

**Author:** ![troy.roberge](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/troy.roberge/32/51507_2.png) [@troy.roberge](https://forum.bubble.io/u/troy.roberge)\
**Post date:** [December 27, 2022, 1:16pm UTC](https://forum.bubble.io/t/bevel-border-css-question/238646/4 "2022-12-27T13:16:00Z")

</div>

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?

 ![Screenshot_20221227-081120_Chrome](https://us1.discourse-cdn.com/bubble/original/3X/e/d/ed225363995409f90f5dd7a0183c99f3c34f809b.jpeg)

Here is a basic generator I found. Don’t forget to use the ! important tags after each clause, just in case.

> **[Border / Outline CSS Code Generator](https://html-css-js.com/css/generator/border-outline/)**
>
> Select what CSS to generate: border or outline and set your preferences: thickness of the line, style, the color and finally the position of the line

You will need to find a few CSS resources online to get you what your need, but it’s certainly doable.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [December 27, 2022, 2:25pm UTC](https://forum.bubble.io/t/bevel-border-css-question/238646/5 "2022-12-27T14:25:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![troy.roberge](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/troy.roberge/32/51507_2.png) [@troy.roberge](https://forum.bubble.io/u/troy.roberge)\
**Post date:** [December 27, 2022, 2:47pm UTC](https://forum.bubble.io/t/bevel-border-css-question/238646/6 "2022-12-27T14:47:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [December 27, 2022, 2:58pm UTC](https://forum.bubble.io/t/bevel-border-css-question/238646/7 "2022-12-27T14:58:30Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![troy.roberge](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/troy.roberge/32/51507_2.png) [@troy.roberge](https://forum.bubble.io/u/troy.roberge)\
**Post date:** [December 27, 2022, 3:05pm UTC](https://forum.bubble.io/t/bevel-border-css-question/238646/8 "2022-12-27T15:05:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [December 27, 2022, 3:16pm UTC](https://forum.bubble.io/t/bevel-border-css-question/238646/9 "2022-12-27T15:16:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [December 27, 2022, 3:18pm UTC](https://forum.bubble.io/t/bevel-border-css-question/238646/10 "2022-12-27T15:18:21Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/dorilama/32/226878_2.png) [@dorilama](https://forum.bubble.io/u/dorilama)\
**Post date:** [December 27, 2022, 3:27pm UTC](https://forum.bubble.io/t/bevel-border-css-question/238646/11 "2022-12-27T15:27:18Z")

</div>

for anything css/js related [https://developer.mozilla.org/](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](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) with examples of inset and outset border styles.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [December 27, 2022, 3:29pm UTC](https://forum.bubble.io/t/bevel-border-css-question/238646/12 "2022-12-27T15:29:19Z")

</div>

> [@dorilama](#):
>
> for anything css/js related [https://developer.mozilla.org/](https://developer.mozilla.org/) is your best friend.

Awesome thanks, just had a look, really nice resource 👍