Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- outline:1px solid white;
- box-shadow: 0 0 0 1px black; // Outside black border 1px
- box-shadow: 0 0 0 1px white inset; // Inside white border 1px
- box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;
- .right-border {
- position: relative;
- }
- .right-border:after {
- content: '';
- display: block;
- position: absolute;
- top: 0; right: 0;
- width: 1px;
- height: 100%;
- background: #e0e0e0;
- }
- &:before {
- content: '';
- display: block;
- position: absolute;
- top: 0; right: 0; bottom: 0; left: 0;
- border: 1px solid #b7b7b7;
- }
- div {
- float:left;
- width: 50%;
- border:1px solid black;
- margin: -1px;
- }
- <body>
- <div>A block</div>
- <div>Another block</div>
- </body>
- .outer { width: 50%; float: left;}
- .inner { border: 1px solid black; }
- <body>
- <div class="outer">
- <div class="inner">A block</div>
- </div>
- <div class="outer">
- <div class="inner">Another block</div>
- <div>
- </body>
- #test, #test2 {
- width: 100px;
- height:100px;
- background-color:yellow;
- }
- #test {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- border: 10px dashed blue;
- }
- #test2 {
- outline: 10px dashed red;
- }
- <p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
- <div id="test">border-box</div>
- <p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
- <div id="test2">outline</div>
- .myDiv {
- width: 100px;
- height: 100px;
- padding-left: 2px;
- padding-right: 2px;
- }
- .myDiv:hover {
- padding-left: 0;
- padding-right: 0;
- border-left: 2px solid red;
- border-right: 2px solid red;
- }
- body { background-color: #FFF; }
- .myDiv {
- width: 100px;
- height: 100px;
- border: 3px solid #FFF; // Border is essentially invisible since background is also #FFF;
- }
- .myDiv:hover {
- border-color: blue; // Just change the border color
- }
Add Comment
Please, Sign In to add comment