Hi @mstudioil,
I understand what you are trying to achieve here, dealing with border styles spread across multiple elements can feel overwhelming, and I am keen to help you approach this in a cleaner and more manageable way.
In WooCommerce and modern WordPress themes, those border values like 1px solid hsla(0,0%,7%,.11) are usually applied through shared utility classes or inherited styles rather than a single master list you can edit. The most reliable way to identify exactly which classes are affecting a specific border is to use your browser’s developer tools. When you right click on the element and choose Inspect, you will be able to see the exact CSS rule and class responsible for that border, including whether it is applied to the full border or only top or bottom. This helps you target only the necessary selectors instead of changing many classes blindly.
In many cases, you can override all related borders more efficiently by targeting a higher level wrapper or using a more generic selector, for example applying a border color override to WooCommerce table elements, form fields, or card containers, depending on where you see the borders. This reduces the need to handle each individual border class separately.
If you would like more context on using browser dev tools to trace and override CSS safely, this guide walks through the process clearly and is a good reference to keep handy: https://developer.ww.wp.xz.cn/advanced-administration/debug/debug-wordpress/.
If you can share a specific page or element where the border appears, or a screenshot using https://snipboard.io, I can help you narrow down the exact selector to use so the change stays clean and future proof.
Hey, it is trthe card and checkout pages
How the “debug” will help me find the CSS? I can find them with the “inspect” tool but the there is many of them
Hi there,
Thanks you for the update. The styling of the cart and checkout pages is usually controlled by the theme or plugin you’re using on your site.
If you’re not sure which CSS class to use for styling a border, you can share your cart page URL and let us know exactly where you want the border to appear. We can help point you in the right direction for the correct CSS. Please note, though, that adding or customizing CSS is outside the scope of WooCommerce support.
The easiest and safest way to make style changes is often to contact your theme support team, as they can guide you on the best way to change the border color or other styling in your theme.
Classes are like “.wc-block-cart__main .wc-block-cart-items” these not your classes?
Hi @mstudioil,
Those classes, like .wc-block-cart__main and .wc-block-cart-items, are part of WooCommerce Blocks, so yes, they are WooCommerce’s default classes for cart and checkout blocks.
As mentioned earlier, changing borders on these elements requires CSS customization. There isn’t a single “list” of all border classes; many are applied to different elements, and some are inherited from parent wrappers.
The best approach is:
- Use your browser’s Inspect tool to find the exact element you want to style.
- Target the relevant wrapper or element in your CSS (for example,
.wc-block-cart__main .wc-block-cart-items { border-color: #yourcolor; }).
- If you want to change multiple borders at once, you can target a higher-level wrapper to override borders globally for that section instead of styling each class individually.
Since CSS customization is theme/plugin dependent, WooCommerce support cannot provide full styling guidance. If you need more control, your theme support or a front-end developer can help ensure changes are clean and future-proof.
It’s been a while since we heard back from you for this reason we are closing this thread.
If WooCommerce has been useful for your store and you appreciate the support you’ve received, we’d truly appreciate it if you could leave us a quick review here:
https://ww.wp.xz.cn/support/plugin/woocommerce/reviews/#new-post
Feel free to open a new forum topic if you run into any other problem.
OK. thanks. this not fix the problem.
Hi @mstudioil,
Those classes (for example, .wc-block-cart__main, .wc-block-cart-items) are part of WooCommerce Blocks, but WooCommerce does not provide a single list of border classes. Borders are applied to multiple elements and can also come from the active theme, which is why you’re seeing many selectors in Inspect.
Identifying and overriding the exact borders using custom CSS is considered theme-level customization, which is outside the scope of WooCommerce support. The recommended approach is to use your browser’s Inspect tool to target the specific elements you want, or contact your theme support for guidance on a global, future-proof selector.
You should use the same class for every border-top and border-bottom and etc.
Now there is too many classes.
But I going the leave the colors as they are for now
Hi @mstudioil,
Understood. At this point, since changing or consolidating border classes requires custom CSS and theme-level decisions, this goes beyond what WooCommerce support can assist with directly.
If you decide to revisit this later, your theme support team or a front-end developer would be the best place to get a clean, global solution for borders on cart and checkout blocks.
Thanks for the update, and feel free to open a new thread if you run into any other WooCommerce issues.
If you found our support helpful, please leave us a review here.
