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 force all rows in a table to have the same height

    How to add head section in a page that has layout template

    How to remove the default active tab color when another tab is active using jquery

    How to indent text in a select drop down option menu using PHP & CSS? [REDUX]

    CSS: 2-column table, how to make one column as small as possible but no wrap and the other as big as possible?

    How can I hide a div when content is not displayed

    How to get smaller divs to stack to the right of larger divs?

    How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page) [closed]

    How to make a background with 2 gradients in CSS

    How to override a *{list style:none} property

    How to addStyleNames “Multiple css classes” into 1 element in UiBinder in GWT?

    How to remove CSS underline?

    How to apply styles to neighboring elements in a list

    how to set image for anchor tag in mvc through css?

    How to use JavaScript to Alter CSS for Multiple Elements

    How to make html table made by list responsive?

    How to center this stuff inside a link using CSS?

    How is this font face in CSS3 embedded into a css file?

    How to make one side of a div pointy with CSS?

    How to scale an entire webpage down to ipad or phone size

    How to delete the gap

    How to change the current link color in navigation bar

    CSS transform Scale translates the object, how to avoid this?

    how to convert inline CSS into external CSS?

    How can I make inputs display inline?

    How do I download many of the same pictures fewer times with html, css, jquery, etc.?

    How to create CSS heart? / Why is this CSS creating a heart shape?

    how to make a double hover effect with css

    How to make text appear under div without moving other items in list?

    Slickgrid - How to add css at grid creation time?