Today We are sharing about the CSS border properties. The CSS border properties allows you to work on border style, size, and colour. We are going to share some samples and make a beautiful website using the border properties.
Sample 01. Border Size
.box {
border:7px solid #ff3000;
}
border:7px solid #ff3000;
}
Sample 02. Dotted – Border Style
.box {
border:2px dotted #ff3000;
}
border:2px dotted #ff3000;
}
Sample 03. Dashed – Border Style
.box {
border:2px dashed #ff3000;
}
border:2px dashed #ff3000;
}
Sample 04. Double – Border Style
.box {
border:7px double #ff3000;
}
border:7px double #ff3000;
}
Sample 05. Outline Border
.box {
border:7px solid #ff3000;
outline:7px solid #ff8000;
}
border:7px solid #ff3000;
outline:7px solid #ff8000;
}
Sample 06. Specific Border Size
.box {
border:1px solid #ff3000;
border-bottom:12px solid #ff3000;
}
border:1px solid #ff3000;
border-bottom:12px solid #ff3000;
}
Sample 07. Specific Border Color
.box {
border-right:5px solid #ff3000;
border-left:5px solid #ff7000;
border-top:5px solid #ff5000;
border-top:5px solid #ff9000;
}
border-right:5px solid #ff3000;
border-left:5px solid #ff7000;
border-top:5px solid #ff5000;
border-top:5px solid #ff9000;
}
Sample 08. Left border style
.box {
border-left:10px solid #ff3000;
}
border-left:10px solid #ff3000;
}