# Unpacking a themeBorderRadius?

**URL:** <https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220>\
**Category:** Elements\
**Created:** [December 15, 2025, 4:18pm UTC](https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220 "2025-12-15T16:18:52Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [December 15, 2025, 4:18pm UTC](https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220/1 "2025-12-15T16:18:52Z")

</div>

@ben I’m trying to figure out if it is possible to get at the individual radii from a themeBorderRadius?

Would this have to be done in the hooks.js file in a custom component?

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [December 16, 2025, 8:31am UTC](https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220/2 "2025-12-16T08:31:38Z")

</div>

do you want the individual class names or the underlying values?

if you need the underlying values Elements offers a [responsiveProps object](https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-data/rw.getresponsivevalues) that returns the non-formatted values for the control. Is that what you’re after? 🙂

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [December 16, 2025, 5:16pm UTC](https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220/3 "2025-12-16T17:16:38Z")

</div>

@ben Maybe I should explain what I’m trying to accomplish.

I have a custom component that allows the border radius to be set for the component. But within the component, I have a section where I need to duplicate just the bottom left and right radii so that the rendering can match that of the component.

So I have a borderRadius that I want to unpack just the two bottom radii from, so I can always match the settings for the component. I planned to do this in the hooks file and then just pass out those two values.

Does this make sense?

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [December 17, 2025, 7:57am UTC](https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220/4 "2025-12-17T07:57:43Z")

</div>

So you have two options:

1. Use the responsiveProps object and manually build out the tailwind classes in the hooks.js
2. Write a short javascript function in hooks.js to extract the appropriate classnames you need, like so:

```auto
function extractBottomRadiusClasses(twClasses) {
  const tokens = twClasses.split(/\s+/);

  // Matches:
  // rounded-bl, rounded-br
  // sm:rounded-bl-lg, md:rounded-br-xl, etc.
  const regex = /^(?:[a-z]+:)*rounded-b[lr](?:-.+)?$/;

  return tokens.filter(cls => regex.test(cls));
}

const bottomBorderRadiusClasses = extractBottomRadiusClasses(rw.props.borderRadius);
// → ["sm:rounded-bl-lg", "md:rounded-br-xl", "xl:rounded-br"]

```

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [December 17, 2025, 3:31pm UTC](https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220/5 "2025-12-17T15:31:14Z")

</div>

@ben Awesome, that gets the correct classes, but for some reason, in the HTML, when I apply the result, nothing happens.

This is what the code looks like in the HTML.

```auto
<div class="w-full h-auto mt-0 {{bottomBorderRadiusClasses}} bg-black-500">

```

I’m sure there is something I’m doing wrong, but not sure what that might be.

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 18, 2025, 5:29am UTC](https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220/6 "2025-12-18T05:29:10Z")

</div>

Did you return it in setProps?  
In case you are unaware, rw.setProps is where you return the objects / strings / values you have created to make them available in your html.

```javascript
rw.setProps({
	bottomBorderRadiusClasses,
	node: rw.node
});

```

Alternatively, you may just need to add a new instance of the component to the page.

If you are trying to add this code after the fact and testing with an instance already in the page, bottomBorderRadiusClasses will return empty {}

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [December 18, 2025, 5:06pm UTC](https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220/7 "2025-12-18T17:06:49Z")

</div>

@Doobox Hi Gary, yes, I am passing it through with SetProps, and I have some console logging that shows the correct values are being passed out. But the classes are not being applied. I have tried it on both a new and an existing instance.

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 18, 2025, 5:28pm UTC](https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220/8 "2025-12-18T17:28:13Z")

</div>

> [@ben](#):
>
> `const bottomBorderRadiusClasses = extractBottomRadiusClasses(rw.props.borderRadius);`

Change this line ☝

to this 👇

```javascript
const bottomBorderRadiusClasses = extractBottomRadiusClasses(rw.props.borderRadius).join(" ");

```

Just so you know, it was still an array, so that turns it into a string.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [December 18, 2025, 8:39pm UTC](https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220/9 "2025-12-18T20:39:04Z")

</div>

@Doobox Gary, you are a champion. That fixed the problem. I should have noticed when it was displayed in the console that it was an array.

All good now, problem finally solved. Phew!

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [December 19, 2025, 7:19am UTC](https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220/10 "2025-12-19T07:19:51Z")

</div>

ahh yes, thanks @Doobox — I should have returned a string, rather than an array, from the `extractBottomRadiusClasses` method.

Glad you got it sorted 🙂

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [December 19, 2025, 4:06pm UTC](https://forums.realmacsoftware.com/t/unpacking-a-themeborderradius/53220/11 "2025-12-19T16:06:46Z")

</div>

and this is one of the reasons why Gary is very crucial to our community.