What is a practical method for achieving a double-lined border effect?

Here is what I am referring to (with two different colors):

I had to create two span divs and apply a border-right on one and a border-left on the other as my solution. However, I believe there must be a more efficient way to do this with less code.

HTML

<span class="border-right"></span>
<span class="border-left"></span>

CSS

.border-right { border-right: 1px solid #eee }
.border-left { border-left: 1px solid #888 }

Is there a better method to achieve this? Furthermore, since the height of the black background div varies, how can I ensure that the two span elements cover from top to bottom regardless of the height?

css

Answer №1

If you're looking for a simple solution, one approach could be to assign separate left and right borders to span elements with a width of zero.

span { 
  display: inline-block; vertical-align: middle;
  line-height: 24px; height: 24px; 
}
span.dbl {
  border-left: 2px solid blue;
  border-right: 2px solid red;
  width: 0px;
}
div { background-color: #eee; }
<div>
  <span>Something on left</span>
  <span class="dbl"></span>
  <span>Something on right</span>
</div>

Answer №2

you can even utilize the pseudo element for added styling.

* {
  margin: 0;
  padding: 0;
}
.first,
.second {
  width: 100px;
  text-align: center;
  display: inline-block;
}
.first {
  border-right: 2px solid red;
  position: relative;
}
.first:after {
  content: '';
  position: absolute;
  height: 100%;
  top: 0;
  width: 2px;
  right: -4px;
  background: yellow;
}
<div class="first">test</div>
<div class="second">test</div>

Answer №3

One way to achieve this is through

border-right:2px solid black;

Answer №4

Great responses from @Akshay and @abhitalks, a simple solution is to use the following CSS:

border-right: 10px solid blue;
box-shadow: 10px 0 0 red;

Check out this live example:

http://jsfiddle.net/off3f1gg/

Answer №5

Hey there, give this code a shot!

    <h2>Example 1</h2>
<div class="header">
    <div class="left-shide"></div>
    <div class="right-shide"></div>    
</div>

<h2>Example 2</h2>
<div class="header">
    <div class="left-shide2"></div>
    <div class="right-shide2"></div>    
</div>

CSS

.header{
    height:50px;
    width:100%;
    background-color:rgb(15, 15, 15);
    float:left;
}

.left-shide{
    float:left;
    height:50px;
    width:20%;
    border-right:1px solid rgb(0,0,0);
}
.right-shide{
    float:left;
    height:50px;
    width:20%;
    border-left:1px solid rgb(60,60,60);
}



/*Demo 2 **/
.left-shide2{
    float:left;
    height:50px;
    width:20%;
    box-shadow:1px 0 1px rgba(0,0,0,1);
}
.right-shide2{
    float:left;
    height:50px;
    width:20%;
    border-left:1px solid rgb(60,60,60);
}

Check out the live demo

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

Image overlay on a hovering background

I'm currently facing a challenge with creating a hover effect for a background image while keeping the image in front unchanged. I would like the background to darken on hover, but I want the image in front of it to remain the same. Essentially, I ne ...

htmlcssimagebackgroundhover

Angular material tree with nested branches broken and in disarray

I'm facing a challenge with the UI issue of expanding trees on the last node, as it always creates excessive lines from the nodes, similar to the image below. I attempted to adjust the left border height but saw no change at all. Does anyone have any ...

cssangularmaterial-ui

Center alignment is not being applied to the SVG element

I am currently working with React and when my component renders, it displays an SVG inside a div. Here is a snippet of the code: render() { return( <div class="myClass"> <svg> ... </svg> </div> ); ...

htmlcssreactjssvg

Using jQuery to alter the background position of multiple backgrounds in CSS

I'm using jQuery to dynamically adjust the background image position of an element based on screen resolution. Here's the code: var pwwidth = $(window).width(); var pwheight = $(window).height(); var bg1posx = pwwidth - $('h1.portofolio&ap ...

jquerycssbackground-positionbackground-image

Changing the jQuery mobile side panel from push to overlay can be achieved by modifying the display settings when transitioning from a mobile view to a

I'm currently working on a project using jQuery Mobile (JQM) and jquery.mobile-1.4.5. My goal is to create a responsive side menu panel with a fixed header that works well on both mobile and tablet devices. For the design, I want the panel width to b ...

htmljquerycssjquery-mobileresponsive

Center the p tag vertically

To ensure the text inside the p tag aligns vertically in the middle, I've set a specific height for the tag. While this works perfectly for single-line text, it shifts to the top of the p tag when there are two lines of text. It's important to k ...

htmlcssparagraph

CSS not aligning email header correctly

I have been given the task of coding an HTML email for mailing campaigns. I have managed to get everything working, except for a particular piece of code. What I am trying to accomplish is having an image with other elements on top such as titles, a button ...

htmlcssemailoutlook

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 ...

cssgoogle-chromeinternet-explorer-11viewport

The horizontal scrollbar in PrimeNG's p-tree is cleverly concealed until I reach the bottom of the div and start scrolling

I'm facing an issue where the horizontal scrollbar in my p-tree component is hidden until I scroll all the way down. I've tried various CSS modifications, but nothing seems to work. It's surprising that I couldn't find anyone else with ...

htmlcssangularprimeng

Designing a dynamic wizard layout using Bootstrap 4 tabs, however encountering issues with the button functionality limited to a

My goal is to create a seamless navigation experience between tabs. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/b ...

cssbootstrap-4

displaying an item within a text field

I have an input box created using Angular reactive forms <input type="text" formControlName="OrgName" placeholder="Enter name" maxlength="60"> <p class="fieldRequired" *ngIf="showNameMSg" ...

cssangularinputangular-material

What's the best way to use Flexbox to center a component with a "fixed width"?

As I work on my component, here is the code snippet from my highest parent, App.component: app.component.html <div class="wrapper_flex"> <div style="width:400px; background-color: pink;"></div> <div style=& ...

htmlcssangularflexbox

Achieving bottom alignment for an element within a flex item: steps for success

I am dealing with a flex container that contains three flex items, each of which has a link that needs to be aligned at the bottom (all links should be bottom middle-aligned). The flex-items are stretched and do not have a fixed height, similar to the fle ...

htmlcssflexbox

remove a section from the main body

body { display: flex; justify-content: center; align-items: center; background: #0e1538; } <canvas id="spaceholder" width="804" height="604"></canvas> </div> <div class="MenüCenter"> <canvas id="canvas" width="800" ...

javascripthtmlcss

Tips on Creating a Display None Row with a Sliding Down Animation Using Javascript

I am working with a table that has some hidden rows which only appear when the "show" button is clicked. I want to know how I can make these hidden rows slide down with an effect. Here's the snippet of my code: function toggleRow(e){ ...

javascriptjqueryhtmlcss

Dividing a pair of CSS stylesheets on a single HTML page

Currently, I am working on a HTML page that includes multiple javascripts and css files in the header section. <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" /> In order to make the website mobile-friendly, I s ...

javascriptjqueryhtmlcss

The behavior of Mozilla in handling JQuery attr() function may result in variations in design elements such as font-family or font-size

I'm currently working on the login form. Below is my view in CodeIgnitor: <div id="login-form"> <?php echo heading('Login', 2); echo form_open('login/login_user'); echo form_input('email', set_value ...

javascriptjqueryhtmlcss

Issue with font-family not being applied in PHP code

Struggling to preview different fonts? The code below should work, however, the font doesn't seem to change. Check out the output: my Text - Arial.ttf - 1 my Text - Batman.ttf - 1 my Text - Verdana.ttf - 1 While the font is being detected, it& ...

phpcssfonts

"Is there a way to align a span element on the same line as an h

I'm attempting to align a text-number (span) next to an entry-title (h2) on the same line, with the entry-meta block on the following line, including having the reading time float left. I could use some help with my CSS implementation. Thank you. Ex ...

htmlcss

Alignment of elements in a list at the bottom

I am looking to create multi-level tabs using <li> that grow from bottom to top. Here is the current code I have: div{ width: 200px; border: 1px solid black; } ul{ margin: 0px; padding: 0px; } li{ margin: 2px; width: 20px; display: ...

htmlcss