- This topic is empty.
-
Topic
-
CSS borders can be customized in various ways to enhance the appearance of HTML elements. Here are the main types of CSS borders and how to use them:
1. Basic Borders
1.1 Solid Border A solid border is a continuous line with no gaps.
Example:
css/* Solid border */
div {
border: 2px solid black;
}
1.2 Dashed Border A dashed border consists of a series of short lines and gaps.
Example:
css/* Dashed border */
div {
border: 2px dashed black;
}
1.3 Dotted Border A dotted border consists of a series of dots.
Example:
css/* Dotted border */
div {
border: 2px dotted black;
}
1.4 Double Border A double border has two solid lines with a gap between them.
Example:
css/* Double border */
div {
border: 4px double black;
}
1.5 Groove Border A groove border appears as though it is carved into the page.
Example:
css/* Groove border */
div {
border: 4px groove black;
}
1.6 Ridge Border A ridge border appears as though it is raised from the page.
Example:
css/* Ridge border */
div {
border: 4px ridge black;
}
1.7 Inset Border An inset border appears as though it is pushed into the page.
Example:
css/* Inset border */
div {
border: 4px inset black;
}
1.8 Outset Border An outset border appears as though it is coming out of the page.
Example:
css/* Outset border */
div {
border: 4px outset black;
}
1.9 None Border A border of
none
means the element has no border.Example:
css/* No border */
div {
border: none;
}
2. Border Radius
2.1 Single Radius The
border-radius
property rounds the corners of the border box. You can set a single radius for all corners.Example:
css/* Single radius */
div {
border: 2px solid black;
border-radius: 10px;
}
2.2 Multi-radius You can set different radii for each corner using four values.
Example:
css/* Multi-radius */
div {
border: 2px solid black;
border-radius: 10px 20px 30px 40px;
}
2.3 Elliptical Radius You can specify elliptical radii for more complex shapes.
Example:
css/* Elliptical radius */
div {
border: 2px solid black;
border-radius: 50% 25%;
}
3. Border Styles
3.1 Border Width You can set the width of the border using the
border-width
property.Example:
css/* Border width */
div {
border: 3px solid black;
}
3.2 Border Color You can set the color of the border using the
border-color
property.Example:
css/* Border color */
div {
border: 3px solid black;
border-color: red;
}
3.3 Individual Borders You can set borders individually for each side of an element.
Example:
css/* Individual borders */
div {
border-top: 2px solid black;
border-right: 4px dashed red;
border-bottom: 6px dotted green;
border-left: 8px double blue;
}
4. Advanced Border Techniques
4.1 Border Image You can use an image as the border of an element with the
border-image
property.Example:
css/* Border image */
div {
border: 10px solid transparent;/* Border width */
border-image: url('border-image.png') 30 round;
}
4.2 Border Collapse When dealing with tables, you can use the
border-collapse
property to control whether table borders are collapsed into a single border or separated.Example:
css/* Border collapse */
table {
border-collapse: collapse;
}th, td {
border: 1px solid black;
}
Complete Example
Here is a complete example demonstrating different border styles:
HTML:
html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Borders Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="border-example">Solid Border</div>
<div class="border-example dashed">Dashed Border</div>
<div class="border-example dotted">Dotted Border</div>
<div class="border-example double">Double Border</div>
<div class="border-example rounded">Rounded Corners</div>
</body>
</html>
CSS (
styles.css
):css/* General border styling */
.border-example {
padding: 20px;
margin: 10px;
width: 200px;
}
/* Solid border */
.border-example {
border: 2px solid black;
}
/* Dashed border */
.dashed {
border: 2px dashed black;
}
/* Dotted border */
.dotted {
border: 2px dotted black;
}/* Double border */
.double {
border: 4px double black;
}
/* Rounded corners */
.rounded {
border: 2px solid black;
border-radius: 15px;
}
In this example, each
div
has a different border style to showcase the variety of options available in CSS.
- You must be logged in to reply to this topic.