great web box style with css 01

great web box style with css
in this article I will give you some great web box style using div border and css.

example for web box

Box Title

A simple example to create a box with a title using div element with css.

Button

CSS code for web box

<style>
.box_main_div {
    width: 400px;
    margin:2px;
    }

.box_title_div{
    border: 1px solid #418DC6;
    background-color: #93BEDE;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    }

.box_title_div h3{
    margin: 5px;
    color: #323232;
    font: bold 16px "Helvetica Neue",Arial,sans-serif;
    }

.box_body_div{
    border-style: none solid;
    border-width: 1px;
    border-color: #418DC6;
    background-color: #C5DCED;
    padding: 5px;
    }

.box_body2_div{
    height: 100px;
    }

.box_footer_div{
    border-style: none solid solid solid;
    border-width: 1px;
    border-color: #418DC6;
    background-color: #C5DCED;
    padding: 10px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    }

.box_body_button {
    padding: 5px 20px;
    border: 1px solid #124D77;
    -moz-border-radius: 2px 2px 2px 2px;
    display: inline-block;
    white-space: nowrap;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
    font: 13px/17px Tahoma,Geneva,sans-serif;
    text-align: left;
    text-shadow: 0 0 0 transparent, 1px 1px 0 rgba(0, 0, 0, 0.1);
    font-family: "Helvetica Neue",Arial,sans-serif;
    background-color: #357AE8;
    background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);
    }

.box_body_button:active {
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
    }

.box_body_button:hover {
    background-color: #006AB7;
    border: 1px solid #124D77;
    background-image: -moz-linear-gradient(#008ACD, #006AB7);
    }

</style>

HTML code for web box.

<div class="box_main_div">
 <div class="box_title_div">
  <h3>Box Title</h3>
 </div>
 <div class="box_body_div">
  <div class="box_body2_div">
   A simple example to create a box with a title using div element with css.
  </div>
 </div>
 <div class="box_footer_div" style="direction:rtl;">
  <a class="box_body_button" href="#">Button</a>
 </div>
</div>

If this post was good and helpful for you, Please give it Like.

.