How can we help you today?

Modify the Look of Image List Items with CSS (Border, Shadow and Rounded Corners)

In this tutorial, we will show you an example of how Custom CSS can change the look and feel of an Image List element. In the end of this tutorial, you will be able to add a border to your list items, as well as a coloured shadow and make rounded corners. Here is an example of what you can achieve:


Step 1: Prepare the Custom CSS code


Border

Code for adding the border: 


.shortpoint-listitem-wrap {
border: 1px solid #dadada;
}

*change 1px to a greater value if you would like a thicker border;

**change solid to dotted or dashed if you prefer another style. Look up the list of all border styles here.
*** change #dadada to any other color you prefer (HEX color reference here)


Shadow

Code for adding the shadow: 


.shortpoint-listitem-wrap {
box-shadow: 4px 4px 5px #dadada;
}

* first value in px will make the shadow stretch 4px to the right of the box. Use -4px to put it on the left;

** second value in px will make the shadow go 4px down. Use -4px to make it go up;

*** third value in px makes the shadow blurred. If you don't use it the shadow will have no opacity;

**** change #dadada to any other color you prefer (HEX color reference here)


Rounded corners

Code for making rounded corners for the item box:


.shortpoint-listitem-wrap {
border-radius: 10px;
}

* try out greater or smaller px values to control the curve of corners.



Code for making rounded corners for the image:


.shortpoint-listitem-img {
border-radius: 10px;
}

* try out greater or smaller px values to control the curve of corners.


All together

You can use the codes above together or separately. All together they will look like below. This is the look that was shown in the beginning of this article. Feel free to be creative and modify all the parameters you want.


.shortpoint-listitem-wrap {
border: 1px solid #dadada;
box-shadow: 4px 4px 5px #dadada;
border-radius: 10px;
}
.shortpoint-listitem-img {
border-radius: 10px;
}

Step 2: Paste the code into the element

Open the settings of the element and switch to Cusom CSS tab. Paste your code there:



You can find more info on Custom CSS in Page Builder elements in this article: How to Insert Custom CSS into the Page Builder Element (Basic Tutorial)


Happy customizing!


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 52 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more