The lower border is unresponsive in the CSS/HTML code currently in use

Currently diving into the world of Web Development, I find myself tackling the CSS part. My latest challenge involves adding a bottom border to an element, but no matter what I try, the border just won't show up. I've scoured resources for solutions, but nothing seems to work. If anyone could lend me a hand with this, I'd greatly appreciate it.

<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="card borderblue">
            <div class="borderblue">
                <img class="avatar" src="images/traffy.jpg" alt="Trafalgar Law from the Series One Piece">
            </div>
            <div class="borderblue">
                <h3>Trafalgar D. Water Law</h3>
                <p>Surgeon of Death</p>
                <h4>Devil Fruit:Ope Ope no Mi</h4>
            </div>
        </div>
    </body>
</html>
body {
margin: 20px;
    
}

.avatar {
    width: 150px;
}

.card {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    padding: 20px;
    display: flex;
    justify-content:  space-around;
    text-align: center;
    background: #ddebf8;
    color: #2b2839;
    border-bottom:10px solid #a491f1;
    /*
    black - #2b2839 (the text color)
    blue - #ddebf8 (card color)
    purple - #d8cefe (border color)
    */

}

.borderblue{
    border: 1px dotted blue;
}

Answer №1

Currently, the .borderblue class is being used on your .card div. Since this class appears last in your CSS, it is overriding the existing border-bottom style.

To achieve a different effect, you have two options: either rearrange the order of classes in your CSS file so that .borderblue is placed before .card (resulting in a 10px bottom border and a dotted border around the card), or remove the .borderblue class from the div altogether (which will maintain the bottom border but eliminate the dotted border).

Answer №2

To emphasize a specific bottom border, remember to include !important. For example:

border-bottom:2px solid red !important;

If your bottom border is not displaying correctly, it may be due to the borderblue class.

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

Error message: When the mouse hovers over, display the chart(.js) results in TypeError: t is

I encountered a persistent error that I just can't seem to resolve. My goal is to showcase a chart using Chart.js when the mouse hovers over the canvas. However, upon hovering over the canvas, I keep getting a TypeError: t is null error. Error: { ...

A guide to Embedding a Variable Template Within an Anchor Tag in Django Templates

Just starting out in web development, Django, python, html, you name it. Currently, I have a simple Django app that lists publication titles stored in the database. It's working fine. Now, my goal is to turn each publication title into a clickable li ...

Full-screen modal fade not functioning properly

I am trying to implement multiple fullscreen modals on a single page, but I am facing an issue where they slide in and out at an angle instead of just fading in and out. I have been unable to achieve the desired effect of a simple fade transition. If you ...

"Implementing a JavaScript function to dynamically add multiple div elements to a

I am just starting to learn JavaScript. The main div with the ID "row_logic" contains two nested divs. I need help figuring out how to dynamically increment this root div in the format shown below using JavaScript. <div class="row-fluid" id="row_log ...

Ensuring divs are centered when resizing the page

Is there a way to center an unordered list of tables while ensuring that it remains centered even when the window is resized? The list should move each table to a new line if they can no longer fit. Check out the code snippet below for reference: <d ...

I'm having trouble with aligning my input checkbox within the form

My form includes multiple checkboxes, but I am having trouble aligning them properly. <!-- Multiple Checkboxes (inline) --> <div class="form-row"> <label class="chkdonar" for="donarchkform-0">Yes, I want to donate to AMIAB</label> ...

How come the margin-bottom is displaying as the margin-top?

When I attempt to add margin-bottom on a div inside its parent, it seems to display as the parent's margin-top. Why is that? HTML: <div id="wrapper"> <div id="content"> <div id="box"></div> </div> </d ...

"Can we have selection options or drop-down menus that are in line with today

Currently working on a website project for a client where I, as a designer learning to code, have integrated three select options. This is how it appears: The client's new requirement is that the arrival date should automatically display as the curr ...

The HTML header is not displaying at the proper width as intended

Let me lay out the blueprint I had in mind for my webpage: The body will have a width and height of 600 x 800 pixels with no padding, allowing elements to snugly align without any margin. Inside the body, there will be 3 key elements - a header, main c ...

Arranging th tags level and at equal height within a datable using HTML and CSS

I am looking to arrange my top headers in a table so that the red square icon is always next to the first span without using absolute positioning. Is there a way to achieve this without using absolute position? table.dataTable thead span.sort-icon { ...

Activate Intellisense for PHP in .html documents within Webmatrix

How can I set up WebMatrix to treat .html files like .php files? I have been tasked with editing a website that contains php code within .html files. The site works properly due to handler declarations in the .htaccess file. I want to use WebMatrix for ed ...

Show special characters with accents within an SVG element on a webpage written in HTML

I'm having trouble with accented characters (like á, é, etc) not displaying in my SVG object on an HTML page. Here's how the page is declared: <!DOCTYPE html> <html lang="en"> <head runat="server"> <meta charset="utf-8 ...

Having difficulty selecting a nested ul with CSS, I'm currently exploring different options

For the website I am working on, I have a cms system that is responsible for rendering menus. My current task involves selecting the children of the parent menu items, and here is how the code is being generated: <div class="menu"> <ul> ...

Show 1 Blog Post on a Separate AngularJS Page

I would like to show only Test Post 1 on the next HTML page titleDetails.html when the user clicks on Test Post 1 in index.html 1) titleDetails() in index.html: <a ng-click="titleDetails(post)">{{ post.title }} </a> 2) Controller Variables a ...

Angular Material: Enhanced search input with a universal clear button

After searching for a cross-browser search control with a clear button similar to HTML5, I found the solution rendered by Chrome: <input type="search> The code that gave me the most relevant results can be found here. I used the standard sample w ...

Using PHP to send emails with embedded images and background images

I am struggling to send an email with a single image placed on top of another background image. I have managed to make it work using the following code: $message .= "<tr><td background='https://path-to-background/image.jpg'><img s ...

The jQuery animate() method fails to execute animations

I'm currently working on a JavaScript animation project and I've run into some roadblocks. One particular issue I'm facing is with animating the <label>'s margin-top, as it's not behaving as expected. For example: $(' ...

CSS behaving strangely with the height property

I've run into a specific issue with a div element that contains multiple buttons. I am trying to adjust the height and position of one button so that it takes up space above the other buttons, but every time I make changes to its height and position, ...

Which Javascript/Css/HTML frameworks and libraries would you suggest using together for optimal development?

Interested in revamping my web development process with cutting-edge libraries, but struggling to navigate the vast array of tools available. The challenge lies in finding a harmonious blend of various technologies that complement each other seamlessly. I& ...

Javascript is not functioning properly when making an ajax call

Having a bit of trouble with JavaScript not working after an Ajax call. Everything functions normally until new data is fetched from the database or an Ajax call is made. The issue seems to be that the JavaScript doesn't load properly. Any help would ...