Title: Adding border on product hover
Last modified: May 28, 2021

---

# Adding border on product hover

 *  Resolved [dfwpress](https://wordpress.org/support/users/dfwpress/)
 * (@dfwpress)
 * [5 years ago](https://wordpress.org/support/topic/adding-border-on-product-hover/)
 * Hello,
 * I am use this CSS to add border to product hover (on loop):
 *     ```
       ul.products li.product :hover   
       { 
       border-style: solid ;
       border-width: 1px ;
       	border-color: #708 ;
       }
       ```
   
 * But please is there any simple solution to exclude borders inside box (image,
   title, price)? I would like that remains only border outside of box.
 * Thank you

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Support [Gabriel – a11n](https://wordpress.org/support/users/gabrielfuentes/)
 * (@gabrielfuentes)
 * [5 years ago](https://wordpress.org/support/topic/adding-border-on-product-hover/#post-14494904)
 * Hi there 👋
 * Could you please share a link to your site so that I can check if I can generate
   that custom CSS code for you?
 * Cheers!
 *  Thread Starter [dfwpress](https://wordpress.org/support/users/dfwpress/)
 * (@dfwpress)
 * [5 years ago](https://wordpress.org/support/topic/adding-border-on-product-hover/#post-14495155)
 * alatmix.ba
 *  Thread Starter [dfwpress](https://wordpress.org/support/users/dfwpress/)
 * (@dfwpress)
 * [5 years ago](https://wordpress.org/support/topic/adding-border-on-product-hover/#post-14495280)
 * The theme is Storefront
 *  Plugin Support [Gabriel – a11n](https://wordpress.org/support/users/gabrielfuentes/)
 * (@gabrielfuentes)
 * [5 years ago](https://wordpress.org/support/topic/adding-border-on-product-hover/#post-14496521)
 * Great! This can be fixed with some custom CSS. Under **Customize > Additional
   CSS**, replace the previous code and the following one:
     
 *     ```
       /* Add border to product */
       ul.products li.product a:hover {
           border-style: solid;
           border-width: 1px;
           border-color: #708;
       }
       ```
   
 *  
    If you’d like to learn more about CSS, I highly recommend using the [free tutorials at w3schools](https://www.w3schools.com/w3css/).
   Here, you can find the basics of [selectors](https://www.w3schools.com/cssref/css_selectors.asp)(
   how to target the right element on the page), and [properties](https://www.w3schools.com/cssref/)(
   how to change the element on the page).
 * Cheers 🙂
 *  Thread Starter [dfwpress](https://wordpress.org/support/users/dfwpress/)
 * (@dfwpress)
 * [5 years ago](https://wordpress.org/support/topic/adding-border-on-product-hover/#post-14496874)
 * OK
    Thank you
 *  Plugin Support [Gabriel – a11n](https://wordpress.org/support/users/gabrielfuentes/)
 * (@gabrielfuentes)
 * [5 years ago](https://wordpress.org/support/topic/adding-border-on-product-hover/#post-14500173)
 * Happy to help 😃
 * Great! If you have any further questions, you can start a new thread.
 * Cheers.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Adding border on product hover’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [Gabriel – a11n](https://wordpress.org/support/users/gabrielfuentes/)
 * Last activity: [5 years ago](https://wordpress.org/support/topic/adding-border-on-product-hover/#post-14500173)
 * Status: resolved