CSS3 Box Width with Box-Sizing

Use the box-sizing property to change not only the width of element, but the height.

Following is the code for box width with box-sizing using CSS3 −


 Live Demo

<!DOCTYPE html>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
div {
   width: 200px;
   height: 200px;
   display: inline-block;
.contentBox {
   padding: 50px;
   border: 1px solid rgb(255, 0, 128);
.borderBox {
   box-sizing: border-box;
   padding: 50px;
   border: 1px solid rgb(194, 0, 194);
<h1>Box sizing example using CSS</h1>
<div class="contentBox">
This div doesn't have box sizing property that's why it looks bigger
<div class="borderBox">
This div has box sizing property


The above code will produce the following output −