Can a single div have three different border-bottom styles?

Can three border-bottom styles be applied to a single div element?

This is the desired appearance:

Answer №1

Check out this code snippet http://codepen.io/anon/pen/abc123

<div id="container"></div>  

#container{
width:200px;
height:200px;
background:red;
box-shadow: 0px 3px blue, 0px 6px green, 0px 9px yellow;
border-radius:10px;
}

Answer №2

Here is an effective method to achieve the desired output.

HTML Structure

<div class="borderBox">
  <div class="innerCnt">
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </div>
</div>

CSS Styling

.innerCnt {
  background: #fff;
  position: relative;
  z-index: 1;
  border-radius: 5px;
}
.innerCnt ul {
  margin: 0
}
.borderBox {
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 8px;
  position: relative;
}
.borderBox:after,
.borderBox:before {
  border: 1px solid #ccc;
  content: " ";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 1px;
  border-radius: 8px;
}
.borderBox:after {
  top: 3px;
  border-radius: 7px;
}

Answer №3

To achieve this effect, consider using border double, border-radius, and shadow properties.

.element {
    border-radius: 8px;
    border-bottom: 4px double #CCCCCC;
    box-shadow: 0 2px 4px rgba(204,204,204, 1);
}

Answer №4

To achieve a similar visual effect, apply the following CSS code:

border-bottom: 3px double #BBBBBB;

If you desire three lines, create separate divs for each and style them with the following CSS:

border-bottom: 1px solid #BBBBBB;

For the final div, consider adding a shadow effect for added visual interest.

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

javascript, issues with floating and displaying elements

I am currently working on creating a JavaScript menu that has a click function to smoothly slide up and down. Although the JavaScript code appears to be functioning correctly, it seems that there is some interference with the CSS. Despite attempting vario ...

The Angular overlay is concealed beneath the pinned header

I am seeking a solution to have a mat-spinner displayed on top of my app while it is in the loading state. Currently, I am using an overlay component with Overlay from @angular/cdk/overlay. The issue arises when part of the spinner that should be overlai ...

How to Use CSS to Crop a String from the Middle

My file has a long name and I am using CSS text-overflow: ellipsis to crop it. <style> #fileName { width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } </style> <div id="fileName"> ...

Should the refresh button be displayed once the animation finishes?

Can anyone provide guidance on how to write jQuery code that will reveal a hidden button after an animation is finished? The button should also be able to refresh the animation for the user to watch again. Check out this fiddle: http://jsfiddle.net/rabela ...

Adjustable Bootstrap Progress Bar - Modify element width on the fly

I have encountered an issue with my progress bars on the webpage. The static HTML version works perfectly fine, but the dynamically created one using jQuery seems to be instantly at 100% without any delay in progression. To illustrate the problem better, ...

Struggling to keep navbar fixed with a blur effect without it colliding with body content as you scroll?

I'm looking to create a sticky navbar with a blur effect similar to the one seen on (try scrolling to see the blur effect on the nav). I want it to have the following structure: My HTML code is as follows: <header class="sticky z-10 top-10"> ...

Words placed in the middle of the picture

<div> <img style="vertical-align:middle" src="https://placehold.it/60x60"> <span style="">New Product</span> </div> I require this specific layout to be responsive. Could you please provide instructions on achieving this? ...

Create a sleek Bootstrap 4 webpage featuring a fixed footer and navigation bar. However, the challenge lies in ensuring that the content fills the

Currently, I am in the process of creating a template page that includes a navbar and a footer with the intention of adding additional columns within the main div (container-fluid) at a later stage. However, I have encountered two issues that I cannot seem ...

Tips for utilizing CSS container queries in conjunction with the Material-UI framework

I'm looking to implement CSS container queries with MUI. In my code, I want to change the background color to red if the parent width is less than 300px. Check out the sandbox const StyledItem = styled("div")(({ theme }) => ({ border: ...

Implement a vertical scrolling animation in datatables

I am trying to utilize datatables to display all data. My goal is to have the data automatically scroll row by row every 3 seconds. This is my code, and you can also check it out on jsfiddle The intention is to showcase this data on a large screen. < ...

Fundamentals of object property in jQuery and Javascript

Currently working on creating a new property named startPosition and setting the top property to equal the button's current top value in CSS. Below is the jQuery code snippet: var morphObject = { button: $('button.morphButton'), c ...

Issue with content not wrapping inside the body tag (apart from using float or setting body and html to 100

Why on earth is the body/html or .main div not wrapping my .container div's when the browser width is between 767-960 px?! This is causing horizontal scrolling and I am completely baffled. This should definitely be working! The only code I have is: ...

How to truncate lengthy text in a table on mobile screens using Bootstrap 4

I am currently working on a responsive table that needs to display correctly on both desktop and mobile devices. However, I have run into an issue where long text in the table gets truncated on mobile devices, compromising the responsiveness of the design. ...

Tips for generating an input element using JavaScript without the need for it to have the ":valid" attribute for styling with CSS

My simple input in HTML/CSS works perfectly, but when I tried to automate the process by writing a JavaScript function to create multiple inputs, I encountered an issue. The input created with JavaScript is already considered valid (from a CSS ":valid" sta ...

Revamping the hyperlinks in my collapsible menu extension

Is there a way to modify the links in this accordion drop menu so that they lead to external HTML pages instead of specific areas on the same page? I've tried various methods but can't seem to achieve it without affecting the styles. Currently, i ...

Problem with user scalability in desktop browsers: when zooming out to 33% and lower, all CSS vanishes

Having trouble understanding why my styling disappears at 33% zoom on Chrome and even worse at 75% on IE11. <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta name="viewport" content="w ...

Struggling to modify CSS properties for :before and :after pseudo-elements?

My current styling looks like this: section.tipos .content > div:before { background: none repeat scroll 0 0 #DDDDDD; content: " "; height: 10px; left: 32%; position: absolute; top: -10px; width: 10px; } It's working p ...

Compiling SCSS to CSS in Vue.js is a breeze

I am working on a vue js project that includes scss files. My goal is to compile these scss files into css and store them in the public folder. How can I achieve this? Should I make changes to the vue.config.js file? const path = require('path'); ...

What separates text-align:center from margin auto?

As someone who is just beginning to learn about CSS, I have come across the properties: text-align:center; and margin:auto; Both of these seem to center elements, but how exactly do they differ from each other? Any insights would be much appreciated. T ...

Pictures are automatically adjusted to a resolution of 0 x 0 within the Heroku application

I have encountered an issue with my simple webpage hosted on Heroku. Despite appearing perfectly fine on localhost, 4 images are automatically resized to 0x0 when viewed on Heroku. I am struggling to identify the cause of this problem. Here is how it appe ...