How to Draw Multiple Horizontal Lines (Notebook Paper Effect) Using CSS

How to align two elements on the same line without changing HTML

Using display:inline-block

#element1 {display:inline-block;margin-right:10px;} 
#element2 {display:inline-block;} 

Example

How to draw a dotted line with css?

For example:

hr {
  border: none;
  border-top: 1px dotted #f00;
  color: #fff;
  background-color: #fff;
  height: 1px;
  width: 50%;
}

before
<hr>
after

Css Paper effect not working in FireFox

You are missing the unprefixed version in background-size:

-webkit-background-size: 100% 30px;
-moz-background-size: 100% 30px;
-ms-background-size: 100% 30px;
background-size: 100% 30px;     // !!!

fiddle

and for the bonus, added -ms-linear-gradient (and changed unprefixed data)

background: -webkit-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
background: -moz-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
background: -ms-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
background: linear-gradient(to top, #848EEC 0%, white 8%) 0 57px;

fiddle2

Draw horizontal rule in React Native

You could simply use an empty View with a bottom border.

<View
  style={{
    borderBottomColor: 'black',
    borderBottomWidth: StyleSheet.hairlineWidth,
  }}
/>

---

Related Topics