Troubleshooting a Border Problem in CSS

Just joined this site and I'm new to coding, eager to learn more.

I'm trying to make the border of this grey box grey, with the rest being blue. I've searched online but can't find exactly what I need.

The grey area is 200px wide and starts about 26px in from the left of the page.

Can anyone assist? Thanks in advance!

Border Image

The header code is here - the grey box is part of a logo image. 

<div class="fusion-header" style="height: 91px; overflow: visible;">
        <div class="fusion-row">

    <div class="fusion-logo" data-margin-top="5px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px">
cssborder

Answer №1

You have the ability to change the appearance of a parent element's border within the logo section by utilizing a negative bottom margin that matches the size of the border.

.header {
  background: #515151;
  border: 5px solid #5EDBE7;
}

.logo {
  width: 200px;
  height: 50px;
  margin: 50px auto;
  background: #5D5D5D;
  
  /* Modify the parent element's border */
  border-bottom: 5px solid #999;
  margin-bottom: -5px;
}
<div class="header">
  <div class="logo"></div>
</div>

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

bootstrap for building responsive websites

I am trying to modify the width of an input from 100% to 50%, and position it in the center of the page so that it remains responsive when resizing the browser window. <!DOCTYPE html> <html> <head> <title>test</title&g ...

htmlcsstwitter-bootstrapinput

Ensure that the user's browser cache is cleared after deploying a new version on Firebase hosting

Utilizing create-react-app for my front end scripts and firebase hosting for deployment has been smooth overall. However, I've encountered an issue where updates to CSS and HTML files don't always reflect on the domain until I manually clear the ...

htmlcssreactjsfirebasefirebase-hosting

Tips for utilizing string interpolation in the style tag of an Angular component

@Component({ selector: 'app-style', template: ` <style> .test { color: {{ textColor }} } </style> ` }) export class StyleComponent { textColor = "red"; } The current method doesn't appear to b ...

cssstringangularstylesinterpolation

How to Convert Pixel Units to Rem and Em in CSS?

Until recently, I developed my website exclusively using pixels, which has made it less responsive than I'd like. Is there a method to efficiently convert pixel measurements to rem/em units, allowing for quicker and easier modifications? ...

cssresponsive-design

Why isn't the background color displaying for the child text element during animation?

My search boxes are arranged in a grid layout with the use of the display: grid property. When I click on or focus on the <input type="text"> elements in column 1, the text elements within the <span> tag with class names placeholder2, ...

htmlcssflexboxcss-animations

Conceal the PayPal Button

Currently, I'm facing a challenge where I need to dynamically show or hide a PayPal button based on the status of my switch. The issue is that once the PayPal button is displayed, it remains visible even if the switch is toggled back to credit card pa ...

htmlcssangulartypescriptpaypal

Ways to conceal a child div element without using any specific ID reference

I encountered an issue where I need to conceal all divs within a parent div except the first one. The challenge is that these divs do not possess any unique identifiers. Is there a way to achieve this task using CSS or pure JavaScript? <div role="list ...

javascripthtmlcss

Seeking a template for a server-side programmer who lacks proficiency in CSS and design?

Hey there all you wise folks! So here's the deal - I'm a PHP/JavaScript wizard when it comes to logic and server-side stuff, but I really suck at design, CSS, and all things arty. Does anyone have any recommendations for a template or tool that ...

phphtmltemplatescss

Error: Uncaught TypeError - The function indexOf is not defined for e.target.className at the mouseup event in HTMLDocument (translator.js:433) within the angular

Upon clicking on an SVG to edit my data in a modal bootstrap, I encountered the following error: Uncaught TypeError: e.target.className.indexOf is not a function at HTMLDocument.mouseup (translator.js:433) This is my SVG code: <svg data-dismiss ...

htmlcssangulartypescript

Is there a way to handle specific email format designs with PHP?

When trying to send an email with specific shipping information and tracking numbers, the formatting appears strange. Here is the desired format: Dear xyz , Per your request, this email is to no ...

htmlcssphp

children in CSS grid expanding beyond grid boundaries

I am facing a challenge with my grid layout where the children's content needs to be scrollable. The grid is sandwiched between a header and footer, as illustrated below: <div class="app"> <div class="header"> Header </div> ...

htmlcss

How to Center a DIV both Vertically and Horizontally with CSS Positioning?

I'm currently working on a webpage layout where I want to have a main div centered horizontally with three smaller divs inside, aligned both vertically and horizontally with equal spacing. I tried using margin: auto on an empty div to center it in the ...

htmlcss

What can I do to prevent my website's font from getting distorted due to the recommended display settings?

I've noticed that newer laptops typically have a display font-size recommendation of 150%, which is causing issues with viewing my webpage correctly. The items appear larger and stretched out on their screens. Is there a way to ensure that users can ...

htmlcsswidth

SignalR enables the display of identical dashboard data pulled from queries on various browsers. By utilizing SignalR/hub, MVC, and C#.NET, the data can

Encountering an issue with my signalr/hub while fetching dashboard data. I'm using 2 browsers to access data based on dates. However, when searching for July on browser 1 and then switching to another month on browser 2, the data in browser 1 gets upd ...

javascriptc#cssmodel-view-controllersignalr-hub

Incorporating CSS and JS files into a WordPress theme

To incorporate Css & Js files into my website pages, I plan to insert the following code into the functions.php file: function cssjsloading(){ wp_enqueue_style('bootstrap-rtl', get_template_directory_uri() . '/css/bootstrap-rtl.css&apo ...

phpcsswordpresswordpress-theming

Deleting a tag from a Flask document

Styling my form has been a challenge with Flask, particularly in regards to the picture field. I'm struggling to remove the "No file chosen" text and style the upload button using CSS, despite incorporating Bootstrap into my file. When hovering over ...

htmlcssflask

Can you explain the concept of fallback color in CSS?

Can you explain to me what a fallback color means? I searched online and found out that it is used to display a color when the specified format is not supported by browsers, like Internet Explorer. Is there anything else I should know about fallback colors ...

cssangularjshtml

Customizing the appearance of two separate tables

I have a pair of tables that I want to style differently. Table 1 needs the images centered with no border, while table 2 should have text left-aligned with a border. Here is the CSS: table, th, td { border: 1px solid #999; border-collapse: colla ...

htmlcss

Styling JavaFX ChoiceDialog with CSS

I'm currently struggling with customizing the appearance of a ChoiceDialog in my JavaFX application using CSS. While I've successfully applied styles to other dialog panes, it seems that the ChoiceDialog is not responding as expected, possibly du ...

cssjavafx-8

JavaScript and modifying the attributes of the nth child

I'm working on a navigation bar that changes the "background-image" of menu items using the nth-of-type CSS selector. Now, I need to figure out how to dynamically change the picture of the "background-image" when hovering over a specific menu item usi ...

javascripthtmlcss