CODEWITHSUNDEEP
css
loeghy10
loeghy10

Reputation: 59

How to create double borders through CSS

How to use CSS doing like this? especially double borders (NOT using border:double;) PS: The HTML code of the Demo: ....1801180218031804 ...

enter image description here

Upvotes: 0

Views: 93

Answers (2)

Ehsan
Ehsan

Reputation: 12959

Try This:

div {
    border:1px solid #ccc;
    padding: 10px;
    display: inline-block;
}

div:before {
    content: attr(data);
    display: inline-block;
    border:1px solid #ccc;
    padding: 10px;
}
<div data="1898"></div>

Upvotes: 0

Rick van Lieshout
Rick van Lieshout

Reputation: 2316

You basically use nesting, meaning the parent container (.container) has a border and the child element (.childdiv) has a border. The html (for a single cell) would look like this:

.container,
.childdiv {
  padding: 20px;
  border: 1px solid black;
}

.container {
  display: inline-block;
  width: 70px;
}

.childdiv {
  display: inline-block;
  width: 30px;
}
<div class="container">
  <div class="childdiv">

  </div>
</div>

Check out the fiddle for a working demo.

Upvotes: 1

Related Questions