How to Apply Border to Image?

So I was working through a sample app and wanted to put a border around an image, so I created a style to be applied to elements of type image. However, the border is applied to a containing DIV instead of the IMG element itself. How do I get a border around the image itself?

Not sure if I’m following, but if you apply a border to the image element, what is happening that you want different?

This is a screenshot of an image element with a border:

Thanks for the reply, @romanmg. Here’s what I see…

The border is not around the image element itself but rather the DIV element which contains it.

Do you have a link to your editor?

hey @shot62,
Are you manually creating the css style with an html element?
I’m asking because of your references to DIV and IMG elements.
You can easily use the property editor to style elements like @romanmg suggested.

But here is a possible reason why the style is been applied to the outside div instead of the img.
When you add an image element in the bubble editor, and assign it an Attribute id of say “my_img”, behind the scenes this is what bubble generates:

<div class="bubble-element Image" id="my_img" style=" ... ">
 <img alt="" src=".. ">
</div>

This means every style you applied to “my_img” is in fact been applied to the outside div.
That is why the border is being applied to the div instead of the image.
Again if a border is all you need then just use the style options in the property editor as @romanmg suggested.

EDIT:
Hey @shot62, so i re-read your post and you stated that

This means you targeted all img elements and not a specific one.
I don’t know what you did but adding this style to the page’s header should work should apply a red border with rounded corners:

img {
  border: 2px solid red !important;
  border-radius: 8px !important;
}

NB: i had to use important to force the style. :frowning_face:
An alternative method which i recommend is to use the bubble property editor to create a new image style. Then whenever you add an image you select your custom style.

Happy bubbling
sean

2 Likes

That’s what I did - at least I think so (still learning the ropes). I examined the DOM using the browser tools only because I didn’t get the expected results. That’s when I learned that the style applied via the style editor was applied to the enclosing DIV. I’d prefer not to mess with CSS, so if there’s a way to do it entirely in Bubble, that’d be great.

Sorry for the poor description on my part. I didn’t actually write any CSS or target “elements” per se. I used Bubble’s style editor to create the border for objects or “things” of type “Image”.

I’ll see if I can figure out how to share the app. It was one of the guided lessons, so not sure if it can be done.

Ok, here’s a bit more info…

I was working through the “Sending data to pages” lesson. The image is dynamic data to which I was applying a style that I had defined already via the Styles tab. (This wasn’t actually part of the lesson. I was exploring.)

EDIT: I just noticed the “Run-mode rendering” option. Setting it to “Adjust element height” is an improvement but not perfect, as the border doesn’t follow the edge of the image exactly.