Discover the power of the CSS border property, a key feature for defining borders around HTML elements.
CSS Borders
You can define an element's border using the CSS border property. This single command allows you to specify the border's width, style, and color. You can also change how the border looks by adjusting its image and curve to make it match what you want better.
<body>
<h2 style="border:2px solid black;">border:2px solid black;</h2>
<h2 style="border: 3px dotted rosybrown;">border: 3px dotted rosybrown;</h2>
<h2 style="border: 5px double lightblue;">border: 5px double lightblue;</h2>
<h2 style="border: 5px dashed slategrey;">border: 5px dashed slategrey;</h2>
<h2 style="border: 8px inset thistle;">border: 8px inset thistle;</h2>
<h2 style="border: 15px ridge steelblue;">border: 15px ridge steelblue;</h2>
<h2 style="border: 5px outset darkcyan;">border: 5px outset darkcyan;</h2>
<h2 style="border: 10px groove grey;">border: 10px groove grey;</h2>
</body>
CSS border-top/right/left/bottom
If you want to show the border on just certain sides of something, you can do it by adding a direction after you mention the border. That tells the computer which sides should get the border. For instance, to display the border only at the bottom, you would use the property border-bottom. Similarly, you can use border-right, border-top, or border-left to display the border on the right, top, or left side, respectively.
<head>
<style>
.one {
border-top: 10px ridge steelblue;
border-left: 5px ridge steelblue;
}
.two {
border-top: 5px solid thistle;
}
.three {
border-bottom: 5px dashed rosybrown;
}
.four {
border-right: 5px dashed gray;
border-left: 5px dashed grey;
border-bottom: 5px dashed black;
}
</style>
</head>
<body>
<h2 class="one"> border-top: 10px ridge teal; <br>
border-left: 5px ridge teal;</h2>
<h2 class="two"> border-top: 5px solid rosybrown;</h2>
<h2 class="three">border-bottom: 5px dashed tomato;</h2>
<h2 class="four"> border-right: 5px dashed black; <br>
border-left: 5px dashed black; <br>
border-bottom: 5px dashed black;</h2>
</body>
CSS border-radius
The border-radius property offers another option for styling borders. It allows you to apply rounded corners to elements, either to all four corners simultaneously or individually to specific corners.
<head>
<style>
.one {
border: 3px solid steelblue;
border-radius: 20px;
padding: 5px 20px 20px 10px;
}
.two {
padding: 5px 20px 20px 10px;
border: 3px solid thistle;
border-radius: 0px 0px 50px 50px;
}
.three {
padding: 5px 20px 20px 10px;
border: 3px solid gray;
border-top-right-radius: 100px;
}
.four {
padding: 5px 20px 20px 10px;
border: 3px solid rosybrown;
border-bottom-right-radius: 100%;
}
</style>
</head>
<body>
<h2 class="one"> border-radius: 20px;</h2>
<h2 class="two">border-radius: 0px 0px 50px 50px;</h2>
<h2 class="three"> border-top-right-radius: 100px;</h2>
<h2 class="four">border-bottom-right-radius: 100%;</h2>
</body>
CSS border-style
When it comes to border style, you have a variety of options to choose from, such as dotted, solid, dashed, ridge, and more. It's important to note that if you want to change the border style on any side, you must first set the border style for that side. Otherwise, no changes will occur.
<head>
<style>
.one {
border-color: steelblue;
border-style: solid;
border-top-style: dotted;
}
.two {
border-color: thistle;
border-style: dotted;
border-bottom-style: ridge;
}
</style>
</head>
<body>
<h2 class="one">border style</h2>
<h2 class="two">border style</h2>
</body>
CSS border-width
The border-width property allows you to specify the width of the border on any side. In addition to specifying the width in pixels (px), you can use keywords such as thick, thin, and medium to define the border thickness.
<head>
<style>
body {
width: 30%;
}
.one {
border: 10px;
border-color: thistle;
border-right-width: medium;
border-left-width: thick;
padding: 5px;
border-style: solid;
border-top-style: solid;
}
.two {
border-style: solid;
border-bottom-style: dotted;
border-color: steelblue;
border-top-width: 20px;
padding: 5px;
}
</style>
</head>
<body>
<h2 class="one">border width</h2>
<h2 class="two">border width</h2>
</body>
CSS border-collapse and border-spacing
When designing forms or other detailed elements, it's common to separate lines to enhance readability. This is where border collapsing comes into play. There are two values associated with it: separate and collapse.
Separate: This value ensures that each item or piece of information written on the border remains distinct and separate from one another. This is the default behavior.
Collapse: On the other hand, this value limits the number of items or information written on a single line by collapsing them together.
While you can create space between items using the separate value, border-collapse doesn't affect the spacing of the border. Instead, it focuses on managing the arrangement of items or information within the border space.
<head>
<style>
body {
background-color: thistle;
}
table,
th,
td {
padding: 10px;
border: solid black;
border-collapse: separate;
border-spacing: 10px;
}
h1 {
text-align: center;
width: 18%;
}
</style>
</head>
<body>
<table>
<h1>collapse</h1>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
</table>
</body>
Collapse
Separate
CSS border-color
The border-color property determines the color of an element's border. If you specify a single color, the entire border will be that color.
To set different colors for each side (top, right, bottom, left), you can provide four color values. The first color corresponds to the top, the second to the right, the third to the bottom, and the fourth to the left.
Alternatively, you can set two colors. The first color applies to the top and bottom borders, while the second color applies to the left and right borders.
<head>
<style>
body {
width: 30%;
}
h2 {
padding: 10px;
border: 10px solid;
border-color: steelblue gray rosybrown thistle;
}
.h2 {
padding: 10px;
border: 10px solid;
border-color: lightcoral steelblue;
}
#h2 {
padding: 10px;
border: 10px solid;
border-color: slategrey transparent;
}
</style>
</head>
<body>
<h2>border-color color</h2>
<p class="h2">border-color property</p>
<p id="h2">border-color property</p>
</body>
You can customize the color of specific border sides using properties like border-top-color, border-right-color, border-bottom-color, and border-left-color. Additionally, with commands like border-block-start-color, border-block-end-color, border-inline-start-color, and border-inline-end-color, you can adjust the colors of borders in the block and inline directions.
<head>
<style>
body {
width: 30%;
}
h2 {
border: 15px solid;
border-right-color: steelblue;
border-top-color: thistle;
border-left-color: grey;
}
.h2 {
border: 9px solid;
border-inline-start-color: hotpink;
border-inline-end-color: slategray;
border-block-start-color: rosybrown;
border-block-end-color: royalblue;
}
</style>
</head>
<body>
<h2>border-color </h2>
<p class="h2">border-color </p>
</body>
CSS border-image
With the border-image CSS property, you can craft a border around an element using an image, stepping away from the conventional border style for more visually captivating designs. You can also include a linear gradient to make the border look attractive.
<head>
<style>
body {
width: 40%;
}
.image-one {
border: 20px solid transparent;
padding: 10px;
border-image: url(./img/border-squre.jpg) 60 / 20px round;
}
.image-two {
border: 20px solid transparent;
padding: 10px;
border-image: url(./img/border-squre.jpg) 80 space;
}
.image-three {
border: 25px solid transparent;
padding: 10px;
border-image: url(./img/border-squre.jpg) 50% round;
}
.image-four {
border: 10px solid transparent;
padding: 10px;
border-image: linear-gradient(#94c2c2, #bc91bb) 20;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p class="image-one">border-image: url(./img/border-squre.jpg)
60 / 20px round;</p>
<p class="image-two">border-image: url(./img/border-squre.jpg)
80 space;</p>
<p class="image-three">border-image: url(./img/border-squre.jpg)
50% round;</p>
<p class="image-four"> border-image: linear-gradient(#94c2c2, #bc91bb) 20;</p>
<br>
<p>This is the photo that is set in the border 👆</p>
<img src="./img/border-squre.jpg">
</body>
The border image also includes the following properties:
border-image-outset
The border-image-outset property allows you to extend the border image beyond its defined border area. By specifying one to four values (for top, right, bottom, and left), you can control the amount by which the border image extends. Similarly, the border-image-inset property determines how much the image is inset from the border edge, affecting its position within the border area.
<head>
<style>
body {
width: 40%;
}
.image-one {
margin: 100px 0 0 50px;
height: 20vh;
text-align: center;
background-color: #ffdbdb;
border: 25px solid transparent;
padding: 15px;
border-image-source: url(./img/B-property.png);
border-image-repeat: round;
border-image-slice: 25;
border-image-outset: 40px;
}
.image-two {
margin: 100px 0 0 50px;
height: 20vh;
text-align: center;
background-color: #ffdbdb;
border: 25px solid transparent;
padding: 15px;
border-image-source: url(./img/B-property.png);
border-image-repeat: round;
border-image-slice: 25;
border-image-outset: 5px;
}
</style>
</head>
<body>
<p class="image-one"> border-image-outset: 40px; </p>
<p class="image-two"> border-image-outset: 5px; </p>
</body>
border-image-repeat
The border-image-repeat property defines how the border image is repeated or stretched within the border area. You can set it to repeat, round, space, or stretch. By specifying two values, you control the repetition behavior independently for the horizontal and vertical directions. The first value applies to the top and bottom edges, while the second value applies to the right and left edges.
<head>
<style>
body {
width: 40%;
}
.image-one {
margin: 100px 0 0 50px;
height: 20vh;
text-align: center;
background-color: #ffdbdb;
border: 25px solid transparent;
padding: 15px;
border-image-source: url(./img/B-property.png);
border-image-repeat: stretch repeat;
border-image-slice: 25;
border-image-outset: 20px;
}
.image-two {
margin: 100px 0 0 50px;
height: 20vh;
text-align: center;
background-color: #ffdbdb;
border: 25px solid transparent;
padding: 15px;
border-image-source: url(./img/B-property.png);
border-image-repeat: space;
border-image-slice: 40;
border-image-outset: 20px;
}
</style>
</head>
<body>
<p class="image-one"> border-image-repeat: stretch repeat; </p>
<p class="image-two"> border-image-repeat: round space; </p>
</body>
border-image-slice
The border-image-slice property divides the border image into nine regions: four corners, four edges, and a middle region. This slicing is controlled by specifying four slice lines, which determine the size of each region. You can set one or two values for the slice lines, which define the distances from the top and bottom edges, as well as from the right and left edges.
<head>
<style>
body {
width: 40%;
}
.image-one {
height: 15vh;
text-align: center;
background-color: #ffdbdb;
border: 25px solid transparent;
padding: 15px;
border-image: url(./img/border-squre.jpg) round;
border-image-slice: calc(60/ 184 * 100%) calc(80 / 284 * 100%) fill;
border-image-width: 30px 48px;
}
.image-two {
height: 15vh;
text-align: center;
border: 25px solid transparent;
padding: 15px;
border-image-source: url(./img/border-squre.jpg);
border-image-repeat: round;
border-image-slice: 50;
}
</style>
</head>
<body>
<p class="image-one"> <strong> border-image-slice: calc(60/ 184 * 100%) calc(80 / 284 * 100%) fill;</strong> </p>
<p class="image-two"> <strong> border-image-slice: 50;</strong> </p>
<br>
<p>This is the photo that is set in the border 👆</p>
<img src="./img/border-squre.jpg">
</body>
border-image-source
The border-image-source property sets the image that will be used as the border.
<head>
<style>
body {
width: 40%;
}
.image-one {
height: 15vh;
text-align: center;
background-color: #ffdbdb;
border: 25px solid transparent;
padding: 15px;
border-image-source: url(./img/A.I\ 3.png);
border-image-slice: 50;
}
.image-two {
height: 15vh;
text-align: center;
background-color: #ffdbdb;
border: 25px solid transparent;
padding: 15px;
border-image-source: url(./img/focus.jpg);
border-image-slice: 50;
}
</style>
</head>
<body>
<p class="image-one"> <strong>border-image-source: url(./img/A.I\ 3.png);</strong> </p>
<p class="image-two"> <strong>border-image-source: url(./img/focus.jpg);</strong> </p>
</body>
border-image-width
The border-image-width property allows you to specify the width of the border image. You can set the value according to the desired width of the border.
<head>
<style>
body {
width: 40%;
}
.image-one {
height: 15vh;
text-align: center;
background-color: #ffdbdb;
border: 25px solid transparent;
padding: 15px;
border-image-source: url(./img/A.I\ 3.png);
border-image-slice: 50;
border-image-width: 30px 5px;
}
.image-two {
height: 15vh;
text-align: center;
background-color: #ffdbdb;
border: 25px solid transparent;
padding: 15px;
border-image-source: url(./img/focus.jpg);
border-image-slice: 50;
border-image-width: 20px 50px 50px 10px;
}
</style>
</head>
<body>
<p class="image-one"> <strong>border-image-width: 30px 5px;</strong> </p>
<p class="image-two"> <strong>border-image-width: 20px 50px 50px 10px;</strong> </p>
</body>
Here is an example of all the properties together.
<head>
<style>
body {
width: 40%;
}
.image-one {
height: 20vh;
background-color: #ffdbdb;
border: 25px solid transparent;
padding: 15px;
border-image-source: url(./img/B-property.png);
border-image-repeat: stretch;
border-image-slice: 15;
border-image-width: 10px;
border-image-outset: 5px;
}
</style>
</head>
<body>
<h1>The border-all Property</h1>
<p class="image-one"><img src="./img/B-property.png"> <br>
This is the photo that is set in the border 👆 </p>
</body>
With the CSS border property, you can easily customize the borders of elements on your web page. You can choose styles, widths, colors, and even add images. This flexibility enhances the visual appeal and design options for your website.