How to avoid double border from the multiple

  • Tags: css

    Problem :

    How to avoid double border lines from the list style? Please see the following fiddle for clear picture. I want 1px width of each box but they are double when the come together.

    http://jsfiddle.net/awaises/4SLPh/1/

    HTML :

    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    

    CSS :

    ul{
         margin:0; padding:0;
         list-style:none;
         }
    ul li{
         width:30%; height:200px;
         border:1px solid black;
         float:left;
         }
    

    Thanks



    Solution :

    Try adding margin-right:-1px; margin-bottom:-1px;


      CSS Howto..

      How do I make a html page printable without reloading/refreshing the data?

      How to create responsive blocks by using just CSS and HTML

      How to add CSS to ASP.NET site with WebOptimization and Bundling

      CSS: How to make background color around text not flush to the text?

      Third-Level Menu Items Are Always Showing

      How to set min-font-size in CSS

      CSS - 5 fluid columns with 6 fixed separators, how to get them to equal 100% of containing div?

      How to include SASS into CSS

      How to make a centered, responsive CSS circle within a Boostrap div?

      How to select 3rd 'a' tag in a list for RSpec test?

      CSS delivery optimization: How to defer css loading?

      How to make Bootstrap container auto for height?

      How to get content of particular column of html page after split using css-rule(-webkit-column-width:)

      How to select all a pseudo-classes in CSS?

      How to change CSS property before element is created?

      CSS Firefox - How to deactivate the dotted border ( firefox click indicator )?

      How do I get the name of div a user must click to appear in a text div?

      How to display visual rows and cols in textarea using css

      how to encode .css file?

      How to align text next to a “div” in HTML/CSS?

      How to use images in css with Webpack

      How do I replicate this website in terms of responsiveness using only css?

      How to change color of a single letter in a word using CSS/HTML or Javascript [closed]

      How to customize CSS depending on (tinier) window size?

      How to wrap text in first div but use the available space where the second div's width should be adjusted to the content?

      How to add border to galleria big image?

      How can Shake FilePatterns be used to minify JS and CSS files?

      how to grow height with the amount of text in css?

      How to center a Dijit Select widget?

      How to center a component without knowing its width in Css