How to make a double color single border using css?


Tags: css,css3

Problem :

Guys actually I need help to make a single border double colored. It means a single line 25 % of red and other 75% of blue color using CSS.

My non-working code:

element { 
  border-bottom:2px solid red;
  position:relative;
  z-index:999;
  opacity:1;

I think it can be possible by :before and :after pseudo elements.



Solution :

HTML:

<div class="element"></div>

CSS:

.element {
    border-bottom: 2px solid #00f;
    position: relative;
}

.element::before {
    background-color: #f00;
    content: "";
    height: 2px;
    position: absolute;
    width: 25%;
}

Demo: JSFiddle


    CSS Howto..

    How can I center an iframe but also have it display inline?

    How can I stop a CSS keyframe animation?

    How to style the value of a placeholder like if I want to give a margin at left of that value, what to write in css?

    How to insert css arrow into html page and make it clickable

    How to make both text and image change on rollover via CSS?

    How to wrap long lines without spaces in HTML?

    How to clip the top bar with screen

    How to create square image thumbnails using only CSS

    How to set background url for css files in thymeleaf?

    How to make a central background over the page in HTML/CSS?

    How do I display an empty div tag with CSS?

    How can this effect (line breaks) be achieved with CSS and/or Javascript

    How to reduce the indentation between first and second line inside circle?

    How to rotate image in relation to mouse position?

    How do I let the DOM know about new elements created on the fly?

    How can I access CSS selectors programmatically? [closed]

    How to create vertically centered meeting borders on a div?

    How to change the Menu colour when selected?

    How to hide ads with media queries?

    how to combine css with php while loop and table?

    How can i stop a child div moving towards left when browser size becomes less than webPage size?

    How to position two elements side by side?

    How to have elements copy other element's auto height css?

    how to change :nth element background size

    How to access a directory one level up in CSS?

    How do you disable the set width of parent element for child element?

    How to be able to preload jquery contents into hidden tabs for ie browser

    How to manage css of big websites within team environment without mess?

    How to make dynamic picture boxes with text on bottom with css?

    How to expand CSS column to available space?