# Adding border to HubSpot's default module Button's HubL

**URL:** <https://community.hubspot.com/t/adding-border-to-hubspots-default-module-buttons-hubl/96725>\
**Category:** CMS Development\
**Created:** [December 26, 2023, 12:26am UTC](https://community.hubspot.com/t/adding-border-to-hubspots-default-module-buttons-hubl/96725 "2023-12-26T00:26:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hyunchoi94](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/hyunchoi94/32/201015_2.png) [@hyunchoi94](https://community.hubspot.com/u/hyunchoi94)\
**Post date:** [December 26, 2023, 12:26am UTC](https://community.hubspot.com/t/adding-border-to-hubspots-default-module-buttons-hubl/96725/1 "2023-12-26T00:26:48Z")

</div>

Hello folks,

I am trying to add a HubSpot module to my template as a dnd\_module. I am adding the default button module (@hubspot/button.module) which has border styling option.

The border I am trying to add should have **1px width, solid style, #fff color, and 7px border-radius** to the following HubL code:

```lia-code-sample
{% dnd_module
 path="@hubspot/button",
 offset=0,
 width=12,
 horizontal_alignment="CENTER",
 padding={
 "default" : {
 "top" : "9px",
 "bottom" : "9px",
 "left" : "25px",
 "right" : "25px"
 }
 },

 %}

```

 ![Screenshot 2023-12-25 at 4.23.12 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/e/9e8617f1a1b9a6e4d45337c02b774bd0b5c52e05.png)

Appreciate your help!

---

<div class="post-metadata">

**Author:** ![Syeda\_Fatima](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/syeda_fatima/32/36951_2.png) [@Syeda\_Fatima](https://community.hubspot.com/u/Syeda_Fatima)\
**Post date:** [December 26, 2023, 5:38am UTC](https://community.hubspot.com/t/adding-border-to-hubspots-default-module-buttons-hubl/96725/2 "2023-12-26T05:38:05Z")

</div>

Hey @hyunchoi94,

I added a styles attribute to the dnd\_module with the desired border and border-radius properties. This should apply the specified styling to the button module within your template for adding a 1px solid border with #fff color and a 7px border-radius to your HubSpot button module using HubL code:

| {% dnd\_module  
path="@hubspot/button",  
offset=0,  
width=12,  
horizontal\_alignment="CENTER",  
padding={  
"default": {  
"top": "9px",  
"bottom": "9px",  
"left": "25px",  
"right": "25px"  
}  
},  
styles={  
"default": {  
"border": "1px solid #fff",  
"border-radius": "7px"  
}  
}  
%} |

You can adjust the values as needed for your specific design requirements. Let me know if you have any further questions or if there’s anything else I can help you with!  
Cheers!

---

<div class="post-metadata">

**Author:** ![hyunchoi94](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/hyunchoi94/32/201015_2.png) [@hyunchoi94](https://community.hubspot.com/u/hyunchoi94)\
**Post date:** [December 26, 2023, 6:02am UTC](https://community.hubspot.com/t/adding-border-to-hubspots-default-module-buttons-hubl/96725/3 "2023-12-26T06:02:59Z")

</div>

Appreciate the answer [@Syeda\_Fatima](https://community.hubspot.com/t5/user/viewprofilepage/user-id/114957) ! But not sure if that is the correct way to add border to @hubspot/button.module. Just like the padding option, I think this is a style field available for @hubspot/button.module just like padding is. Given that padding is set as

```lia-code-sample
padding={
 "default": {
 "top": "9px",
 "bottom": "9px",
 "left": "25px",
 "right": "25px"
 }
},

```

it needs to be accessed as border={} instead of style={}. So I wonder if it should be something like

```lia-code-sample
border={
 "default": {
 {...}
 }
}

```

Here’s more documentation on it but I couldn’t get it to work yet:

> **[Module and theme fields - HubSpot docs](https://developers.hubspot.com/docs/cms/reference/fields/module-theme-fields)**
>
> HubSpot has many different field types, you can use to add flexibility and customization to your themes and modules.

---

<div class="post-metadata">

**Author:** ![Syeda\_Fatima](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/syeda_fatima/32/36951_2.png) [@Syeda\_Fatima](https://community.hubspot.com/u/Syeda_Fatima)\
**Post date:** [December 29, 2023, 12:16pm UTC](https://community.hubspot.com/t/adding-border-to-hubspots-default-module-buttons-hubl/96725/4 "2023-12-29T12:16:25Z")

</div>

Dear @hyunchoi94, as i have tested it with the `@hubspot/button.module` in a HubSpot CMS module, I would suggest you to use the `border` property instead of the `style` property. Based on the information you provided, here’s a potential solution:

```lia-code-sample
border = {
 "default": {
 "width": "1px",
 "style": "solid",
 "color": "#000000" // Replace this with your desired border color
 }
};

```

In the `border` property:

- `width`: Specifies the width of the border.
- `style`: Specifies the style of the border (e.g., “solid”, “dashed”, “dotted”).
- `color`: Specifies the color of the border.

Make sure to replace `#000000` with the actual color code you want for the border.

If you’re facing issues getting it to work, double-check that you are using the correct syntax and that the `border` property is indeed supported for the `@hubspot/button.module`.  
Hope this helps!