how to take away Frame (black) around Images on pages (blog, collections, products) ?

Store Design

Topic summary

Goal: Remove thick black border around images embedded in blog posts and page content (product, collection, single pages) in a Shopify store using the TASTE theme. Screenshots provided to illustrate the issue.

Context: The theme does not show frames on collection grids or image hover states. The border appears only on images inserted into content areas (e.g., blog editor or page text).

Attempted fix: A helper suggested adding CSS (Cascading Style Sheets) in base.css to remove borders on .content-container and .global-media-settings. Steps to edit theme code were provided and a result screenshot shared.

Outcome: The CSS change only removed the border from the central banner on the homepage. The unwanted borders on images within blogs and other page content persist.

Status: Unresolved/ongoing. User asks about TASTE being a Shopify in-house theme, implying limited access to an external developer. Further investigation likely needed to target the correct selectors for images in rich-text/content areas.

Summarized with AI on December 16. AI used: gpt-5.
1

Hello everybody !

… have searched a lot … tried many different codes I found in this forum to integrate either in base.css or theme.liquid to take away the black frame from images. Looks for the user pretty annoying. Not very aesthetic.

Screenshot from 2024-10-18 22-00-50.png
Screenshot from 2024-10-18 22-00-50.png686×514 259 KB

With the theme I use I don’t have frames on collection grids and hover over images, thats fine.

But when writing blog articles, or info text on a product page, collection page or single pages, wherever importing an image (jpg, png etc …), this image is always being surrounded by a black thick frame.

Screenshot from 2024-10-18 22-10-59.png
Screenshot from 2024-10-18 22-10-59.png639×516 119 KB

The Theme we use for the store is TASTE.

I’d appreciate a lot something which helps. :slightly_smiling_face: - Tks in advance for any hint.

1 Like
2

Hi @Digit_PaxMentis

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.content-container {
    border: none;
}
.global-media-settings {
    border: none;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Tks for the quick response. It didnt work what we are targeting at. With the code you gave us only the image framing was deleted of the central banner on the front page. The frames (black border) of the images in all pages, as named, are still there.

The TASTE Theme is a Shopify-inhouse design, right ? So I cant contact an external developer directly to get that problem solved.