Title: CSS Borders etc
Last modified: December 7, 2022

---

# CSS Borders etc

 *  [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/css-borders-etc/)
 * Hey
 * I sure could need a bit of help… I’m trying to tweak your CSS a bit to my liking:
 * Remove border around swatches:
    Adding this removes swatch border but also the
   select border??
 *     ```
       /********** Swatch Layout - Before ************/
       .woocommerce div.product form.cart.variations_form .tawcvs-swatches .swatch:before,
       .woocommerce div.product form.cart.variations_form .tawcvs-swatches .swatch-show-more:before,
       .woocommerce.archive form.cart.variations_form .tawcvs-swatches .swatch:before,
       .woocommerce.archive form.cart.variations_form .tawcvs-swatches .swatch-show-more:before,
       .woocommerce.single-product form.cart.variations_form .tawcvs-swatches .swatch:before,
       .woocommerce.single-product form.cart.variations_form .tawcvs-swatches .swatch-show-more:before {
         border: 0px solid #ddd;
       }
       ```
   
 * Can I just remove the permanent border?
    How can I change border color for selected
   items? Can I make swatches circular round? Can I center my swatch image, so that
   it is not partially cut at swatch border?
 * Prod. page:
    [The page I need help with](https://ewarmy.com/product/ma1-vf-lw-women-bomber/)
 * Swatch title appears low in relation to swatches. Can I horizontal center align
   to the swatch span? Alternative and maybe better: Title above respective swatches,
   everything centered and width 100%
 * The Sober theme code…. What does it actually do? Here rewritten for TT3..
 *     ```
       /*** Custom CSS for Twenty Twenty 3 theme ***/
       .woocommerce.theme-twenty-twenty-three div.product form.cart.variations_form .variations .variable {
         width: 90%;
       }
       @media (max-width: 768px) {
         .woocommerce.theme-twenty-twenty-three div.product form.cart.variations_form .variations .variable {
           width: 100%;
         }
       }
       .woocommerce.theme-twenty-twenty-three div.product form.cart.variations_form .line-hover {
         cursor: default;
       }
       .woocommerce.theme-twenty-twenty-three div.product form.cart.variations_form .tawcvs-swatches .swatch-item-wrapper .swatch-image {
         text-align: center;
       }
       .woocommerce.theme-twenty-twenty-three div.product form.cart.variations_form .tawcvs-swatches .swatch-item-wrapper .swatch-image img {
         width: 100%;
         height: auto;
       }
   
       table.variations {
         overflow: visible !important;
       }
       table.variations .label {
         margin-bottom: 10px;
       }
   
       .swatch-radio {
         width: 100%;
       }
   
       .swatch-radio input[type=radio] {
         width: auto !important;
         height: auto !important;
       }
       ```
   
    -  This topic was modified 3 years, 6 months ago by [hebhansen](https://wordpress.org/support/users/hebhansen/).

The topic ‘CSS Borders etc’ is closed to new replies.

 * ![](https://ps.w.org/variation-swatches-for-woocommerce/assets/icon-256x256.png?
   rev=2602534)
 * [Variation Swatches for WooCommerce](https://wordpress.org/plugins/variation-swatches-for-woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/variation-swatches-for-woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/variation-swatches-for-woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/variation-swatches-for-woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/variation-swatches-for-woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/variation-swatches-for-woocommerce/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [swatches](https://wordpress.org/support/topic-tag/swatches/)

 * 0 replies
 * 1 participant
 * Last reply from: [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * Last activity: [3 years, 6 months ago](https://wordpress.org/support/topic/css-borders-etc/)
 * Status: not resolved