# Calling CSS border properties in a module

**URL:** <https://community.hubspot.com/t/calling-css-border-properties-in-a-module/115548>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [August 30, 2024, 4:34pm UTC](https://community.hubspot.com/t/calling-css-border-properties-in-a-module/115548 "2024-08-30T16:34:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![MrCapp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mrcapp/32/82209_2.png) [@MrCapp](https://community.hubspot.com/u/MrCapp)\
**Post date:** [August 30, 2024, 4:34pm UTC](https://community.hubspot.com/t/calling-css-border-properties-in-a-module/115548/1 "2024-08-30T16:34:59Z")

</div>

Hello - I’m struggling with how to properly apply CSS border properites inside of my module.  
I have the card background and radius sorted but I cannot figure out how to apply the border options.  
I’m trying to apply the border style, width, colour and opacity but I’m clearly missing something.

Any suggestions? Thank you!

{# Module Styles #}

{% require\_css %}

\<style\>

#{{ name }} .super-card {

{# BG COLOUR #}

{% if module.styles.background.color.color %}

background-color: rgba({{ module.styles.background.color.color|convert\_rgb }}, {{ module.styles.background.color.opacity / 100 }});

{% endif %}

{# BORDER #}

{% if module.styles.border.my\_border %}

border-style: {{ module.styles.border.my\_border.style }};

border-width: {{ module.styles.border.my\_border.width ~ ‘px’ }};

border-color: rgba({{ module.styles.border.my\_border.color|convert\_rgb }}, {{ module.styles.border.my\_border.opacity / 100 }});

{% endif %}

{# BORDER RADIUS #}

{% if module.styles.border.radius %}

border-radius: {{ module.styles.border.radius ~ ‘px’ }};

{% endif %}

}

\</style\>

{% end\_require\_css %}

---

<div class="post-metadata">

**Author:** ![MrCapp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mrcapp/32/82209_2.png) [@MrCapp](https://community.hubspot.com/u/MrCapp)\
**Post date:** [August 30, 2024, 5:20pm UTC](https://community.hubspot.com/t/calling-css-border-properties-in-a-module/115548/2 "2024-08-30T17:20:23Z")

</div>

Replying to myself in case others see this in another time, or another dimension…

```lia-code-sample
{# Module Styles #}
{% require_css %}
<style>

	 #{{ name }} .super-card {
		{# BG COLOUR #}
	 {% if module.styles.background.color.color %}
		background-color: rgba({{ module.styles.background.color.color|convert_rgb }}, {{ module.styles.background.color.opacity / 100 }});
		{% endif %}

	 {# BORDER #}
	 {{ module.styles.border.my_border.css }}

	 {# BORDER RADIUS #}
	 {% if module.styles.border.radius %}
		border-radius: {{ module.styles.border.radius ~ 'px' }};
	 {% endif %}
	}

</style>
{% end_require_css %}

```

---

<div class="post-metadata">

**Author:** ![NathanHubsHelp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nathanhubshelp/32/17073_2.png) [@NathanHubsHelp](https://community.hubspot.com/u/NathanHubsHelp)\
**Post date:** [September 5, 2024, 8:34pm UTC](https://community.hubspot.com/t/calling-css-border-properties-in-a-module/115548/3 "2024-09-05T20:34:10Z")

</div>

Hello! As there is no border field type, I would expect that you’d have a group “border” and then 4 fields in that group:  
style (select field)  
width (number field)  
color (color field)  
radius (number field)  
Then your Hubl would be more like:  
border-style: {{ module.styles.border.style }};  
Hope that helps!