# Conditional Bottom Border CSS

**URL:** <https://community.weweb.io/t/conditional-bottom-border-css/5277>\
**Category:** Ask us anything\
**Created:** [November 7, 2023, 6:16pm UTC](https://community.weweb.io/t/conditional-bottom-border-css/5277 "2023-11-07T18:16:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [November 7, 2023, 6:16pm UTC](https://community.weweb.io/t/conditional-bottom-border-css/5277/1 "2023-11-07T18:16:11Z")

</div>

Hi Peeps. Can someone please tell me what’s wrong with this formula? I’m applying conditional logic to the bottom border of the default state of a text element. In both scenarios I want a 1px bottom border, but the color changes depending on whether or not a condition is true. Thanks!

 ![Screen Shot 2023-11-07 at 1.12.20 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/73cce4d56a46275e13be91e980ad22c1048ae783.png)

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [November 7, 2023, 7:00pm UTC](https://community.weweb.io/t/conditional-bottom-border-css/5277/2 "2023-11-07T19:00:18Z")

</div>

you need to combine the colors and widths.

It should be something like this in the end “solid 1px [color]”

now you’re passing them separate which also confuses the underlying JS, what you want to do is the following, you need to make it two separate strings. Also, you’re using [a wrong format.](https://developer.mozilla.org/en-US/docs/Web/CSS/border)

 ![Screenshot 2023-11-07 at 19.58.53](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2798441a1b736817d8e90d82af4ab6038a92a8e6.png)

I used the [ternary operator,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator) but it works the same with if I think.

 ![Screenshot 2023-11-07 at 20.00.05](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/00cb6aa828f4ef362dc24cbe7233dbf066a05440.jpeg)

Actually, if you want only the bottom border for example, you’ll need to try adding this to the custom CSS.

```css
/* top | right | bottom | left */
border-width: 0px 0px 1px 0px;

```

I’m not sure if this will hit the spot though, try it out. I hope the custom CSS will target the right element, where you also have the border applied.

Because at the moment, there is no shorthand property for borders,

> <https://stackoverflow.com/questions/37437141/css-border-shorthand-when-each-border-has-a-different-width>

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [November 8, 2023, 10:37am UTC](https://community.weweb.io/t/conditional-bottom-border-css/5277/3 "2023-11-08T10:37:29Z")

</div>

Your “;” should be +, like Broberto explained 🙂

---

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [November 12, 2023, 1:08am UTC](https://community.weweb.io/t/conditional-bottom-border-css/5277/4 "2023-11-12T01:08:55Z")

</div>

Thanks!