CSS border properties allow you to style the borders around HTML elements, providing control over their appearance, width, color, and shape. Here’s a breakdown of each property with examples:
• border-style
• border-color
• border-width
• border-radius
Purpose: Specifies the style of the border. It defines how the border line appears, such as solid, dashed, dotted, etc.
• none: No border.
• solid: A solid, continuous border.
• dashed: A border made of dashed lines.
• dotted: A border made of dots.
• double: A border made of two solid lines.
• groove: A 3D grooved border.
• ridge: A 3D ridged border.
• inset: A border that makes the element appear as though it is embedded.
• outset: A border that makes the element appear as though it is protruding.
<style>
.border-style-example {
border-style: solid; /* Applies a solid border */
}
</style>
Purpose: Defines the color of the border. This property can be applied to all four borders of an element or individual borders.
• Named colors (e.g., red, blue).
• HEX color codes (e.g., #ff0000 for red).
• RGB (e.g., rgb(255, 0, 0) for red).
• RGBA (e.g., rgba(255, 0, 0, 0.5) for semi-transparent red).
• HSL (e.g., hsl(0, 100%, 50%) for red).
• HSLA (e.g., hsla(0, 100%, 50%, 0.5) for semi-transparent red).
<style>
.border-color-example {
border-color: #ff0000; /* Sets the border color to red */
}
</style>
Purpose: Specifies the width of the border. This can be applied to all four borders or individually to top, right, bottom, and left.
• thin: A thin border
• medium: A medium border (default)
• thick:x A thick border
• Length values (e.g., 1px, 2em)
<style>
.border-radius-example {
border-width: 2px; /* 2 pixels wide border */of 15 pixels */
}
</style>
Purpose: Defines the roundness of the corners of the border. This property is used to create rounded corners on the borders of an element.
Length values (e.g., 10px, 1em): Specifies the radius of the corners.
Percentage values (e.g., 50%): Creates a circle or ellipse depending on the width and height of the element.
<style>
.border-radius-example {
border-radius: 15px; /* Rounds the corners with a radius of 15 pixels */
}
<style>
Here’s a complete example that combines all these border properties:
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Properties</title>
<style>
.border-example {
border-style: solid;
border-color: #3498db; /* Blue color */
border-width: 3px; /* 3 pixels wide */
border-radius: 15px; /* 15 pixels radius for rounded corners
*/
width: 200px;
height: 100px;
margin: 20px;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="border-example">
This is an example of a div with a border. <br> <br>
Hello, this is way to code.
</div>
</body>
</html>