Why does the border-radius property not work on my image elements?

Greetings! I have defined an ID named #img in my stylesheet with the property border-radius: 15px; In my HTML, I assigned this ID to a div. However, the images within that div are not getting rounded corners as expected. When using the img selector, it affects all images which is not what I want because I need the logo and the first image to remain unaffected.

Here's a snippet of my code:

body {
  margin: auto;
  font-family: Arial, Helvetica, sans-serif;
  background-image: url('assets/bg800bulbs.jpg');
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
...
<!DOCTYPE html>
<html>

<head>
  <title></title>
  ...
</head>

<body>

  <div id="page">

    <table id="menu">
      ...
        <image src="assets/logo32.png"></image>
      ...

      <p><a href="#AB" , style="color: black; text-decoration: none;" ;>About Us</a></p>
      <p><a href="#T" , style="text-decoration: none; color: black;" ;>Testimonials</a></p>

    <div>
      <image src="assets/htgreen-hero.jpg"></image>
    </div>

    <div id="text">

      <h2>Towards a zero electricity bill</h2>

      <div>
        <hr>
      </div>

    </div>

    ...
    
  </div>
</body>

Answer №1

Make sure you're selecting the image itself, not just its wrapping element.

Instead of:

#img{

display:block;
float: right;
margin: 0px 0px 15px 20px;
padding: 10px;
border-radius: 5px;
background-color: #FFFFFF;
margin-right: 50px;
border-radius: 15px;

}

Use this:

#img img{

display:block;
float: right;
margin: 0px 0px 15px 20px;
padding: 10px;
border-radius: 5px;
background-color: #FFFFFF;
margin-right: 50px;
border-radius: 15px;

}

By targeting the actual image, you'll get the desired result.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Images are not displaying properly after uploading html files

Recently, I created an HTML file that was functioning perfectly. However, when I uploaded it to a free domain host, some of the images failed to load properly. You can see the current state of the website here, and this is what it should actually look li ...

Ways to resize video display based on window dimensions?

I am struggling with creating a two-column row where one column retains its height and size regardless of the window size, while the other should adjust to shrink or stretch based on the window size. Unfortunately, my CSS skills are still at a beginner lev ...

Retrieve the base64 encoded data from localStorage and showcase it within a div element

After researching a similar question about checking for the existence of a localStorage variable and setting an else if function, and also looking into how to load a base64 image and display it on a div, I have come up with the following code: HTML: <i ...

Guide to creating a dynamically filled dropdown menu with Angular 6 HTML

An array of employees is assigned tests by Lead. When assigning tests, the selected employee is properly assigned. When populating back, Lead can see which test is assigned to which employee. The issue I am facing is that EmployeeID is populated correctly ...

Issues with displaying ngAnimate animations

For the past 10 hours, I've been attempting to get my animations to function properly. It seems that they only work when I include the animate.css stylesheet and use the "animated classname". However, when I try to create custom entrance and exit anim ...

Why is the ajax request in JQuery initiated before the code in beforeSend is fully executed?

I have encountered an issue with my code. I am trying to get a Reload.gif to start playing on my webpage before sending an ajax request to reload the data. However, the GIF only starts playing after the success function is called. Here is the timeline of e ...

Button appears and disappears sporadically while browsing in Safari

I created a slider using SCSS, JavaScript, and HTML. You can view the demo at this link: https://jsfiddle.net/rr7g6a1b/ let mySlider = { initializeSlider: function (options) { let slider = options.container; let slides = slider.querySelectorAll( ...

What is the best way to alter the text of a button when the mouse hovers over it?

I'm looking to create a button that can dynamically change the text inside it when the cursor hovers over it, and then revert back to the original text when the cursor moves away from it. I attempted this in VScode using "document.getElementById().inn ...

The onmessage event in the websocket client seems to be malfunctioning and is not triggering

In my implementation using node.js, I have set up a websocket server and client. The handshake process between the server and client appears as follows: Request URL: ws://localhost:8015/ Request Method: GET Status Code: 101 Switching Protocols Request ...

Prevent vertical scrolling with a Bootstrap 3 fluid layout featuring a sidebar

I'm currently working on a Bootstrap 3 page layout where the main content is positioned on the left, and a small sidebar on the right will house additional links and graphs related to the main information. For reference, you can view the progress at h ...

Enhanced HTML meta tags using PHP for optimal automation

I am looking for a more efficient way to resolve the error I encountered. Error: Parse error: syntax error, unexpected '=>' (T_DOUBLE_ARROW), expecting ')' in C:\xampp\htdocs\php\config.php on line 15 <?php ...

The addition and deletion of classes can sometimes lead to disruptions in the DOM

I've been struggling to phrase this question for a while now. I'm working on a single-page e-commerce site that operates by modifying the HTML in divs and using CSS along with JQuery to show and hide those divs. My problem arises when, occasional ...

Tips on modifying the background color of a read-only field in an edit form

Changing the background color of a readonly field in the edit form of Free jqgrid can be a challenge. One potential solution involves specifying a style: .jqgrid-readonlycolumn { background-color: #FFFFDD; } This style is then used in the colmodel e ...

Can you provide instructions on how to center a button on a webpage?

Utilizing twitter bootstrap and its cover example as a foundation, I have incorporated additional input fields and am striving to center the second one (email) horizontally. Despite my attempts to use .center-block and .text-center on various div elements, ...

Using tabs within a Dialog prevents the Dialog from adjusting its height automatically

Solved: Find the solution in the comments section below. I recently built a Tabs feature within a Dialog box, but ran into an issue where the height of the Dialog did not match up with the height of the tab. The problem arose when a form was placed insid ...

Issue with using variables in nodejs, express, and EJS: Undefined

Having some trouble with EJS here. I am using response.render('agent.html', {name: 'aaaa'});, and in my HTML script, I attempt to access <%= this.name %>. Unfortunately, I keep getting a ReferenceError: aaaa is not defined. Any su ...

Ways to perform a force click on a span element when clicking on a glyphicon

There is a table cell containing two span elements: <span contentEditable=true class="editspan"></span> <span class="pencilspan glyphicon glyphicon-pencil pull-right"></span>" When clicking on span1, an input box appears for editi ...

Please refrain from refreshing the page multiple times in order to receive updated data from the database

Currently, I have created a countdown timer from 00:60 to 00:00. However, once the timer reaches 00:00, I am looking to refresh the page only once in order to retrieve a new value from the database. Does anyone have any suggestions on how to achieve this ...

What is the best way to ensure a grid element has a column designated for each of its children?

Imagine this HTML structure: /* Desired styling: */ .container { display: grid; grid-template-columns: 250px 250px 250px /* this is the part to automate */ grid-template-rows: 50px; } .child { width: 100%; height: 100%; background: ...

Guide on importing a custom CSS file from Syncfusion Theme Studio into an Angular project

Is there a way to incorporate custom scss files downloaded from Syncfusion Theme Studio into Angular CLI without adding the URL to the styles section in angular.json? Can we directly import it into styles.scss instead? I attempted to do so by including th ...