Calling CSS border properties in a module

Develop, Build & Integrate CMS Development
1

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 %}

2

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

{# 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 %}
3

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!