Elements and sections sometimes are divided by a line, just like in books with a flowery curvy line or graphic. Those are simple to do by adding a background image positioned to the bottom of each section and also with bottom space for avoiding text to go over it.

  .section {
     background:url(../images/divider.png) center bottom no-repeat;
     padding-bottom:50px
  }

There are also the vertical dividers, that might be simple lines but because of their height, they can’t be simple borders:

Since the letters are bigger then the divider, using a border-left or border-right is not a good approach here. We always can use the :before or :after pseudo elements for this purpose, because we can define a height for them.

    li {
      float:left
    }
    li:after {
      content: '';
      vertical-align:middle;
      background: #000;
      height:6px;
      width:1px;
      margin:0 5px;
      display: inline-block
   }
   li:last-child:after {
      display: none
   }

There are some other cases where we can use css instead of images when creating section dividers.

This divider is a simple but still classy one because it is faded on the 2 sides, making it more smoother. At first thought I would use an image, but if we can do it with css, then why increase the page load time with another HTTP request?
The code will be simple, we will use a linear gradient with a few stops. We will start the gradient from 0 opacity and go towards full opacity and then again go to 0 opacity at the end.

   .section:after {
      content:'';
      height:1px;
      width:400px;
      margin:0 auto;
      display:block;
      background-image: -webkit-gradient(
         linear,
         left bottom,
         right bottom,
         color-stop(0, rgb(255,255,255)),
         color-stop(0.1, rgb(105,0,0)),
         color-stop(0.9, rgb(105,0,0)),
         color-stop(1, rgb(255,255,255))
     );

      background: -moz-linear-gradient(
         left, 
         rgba(105,0,0,0) 0%,
         rgb(105,0,0) 30%, 
         rgb(105,0,0) 70%,
         rgba(105,0,0,0) 100%
      ); 

      background: -webkit-gradient(
         linear,
         left top, 
         right top, 
         color-stop(0%,rgba(105,0,0,0)),
         color-stop(30%,rgba(105,0,0,1)),
         color-stop(70%,rgba(105,0,0,1)), 
         color-stop(100%,rgba(105,0,0,0))
      );

      background: -webkit-linear-gradient(
         left,
         rgba(105,0,0,0) 0%,
         rgba(105,0,0,1) 30%,
         rgba(105,0,0,1) 70%,
         rgba(105,0,0,0) 100%
      ); 

      background: -o-linear-gradient(
         left,
         rgba(105,0,0,0) 0%,
         rgba(105,0,0,1) 30%,
         rgba(105,0,0,1) 70%,
         rgba(105,0,0,0) 100%
      ); 

      background: -ms-linear-gradient(
         left, 
         rgba(105,0,0,0) 0%,
         rgba(105,0,0,1) 30%,
         rgba(105,0,0,1) 70%,
         rgba(105,0,0,0) 100%
       ); 

       background: linear-gradient(
          to right, 
          rgba(105,0,0,0) 0%,
          rgba(105,0,0,1) 30%,
          rgba(105,0,0,1) 70%,
          rgba(105,0,0,0) 100%
       ); 

As you can see, I used rgb and rgba for the opacity alternations and provided you with a crossbrowser solution, using different prefixes for different browsers.The linear gradient was applied on a pseudo element because we didn’t want the gradient to fill the whole element we wanted only 1px tall line that is in the middle of the page.

If you liked this article please rate, comment and subscribe.