CSS
CSS Borders
This characteristic allows you to make a border around any element on the document. You can give a dynamic visual appearance to the website by customizing its color, style, width, and appearance.
.box {
width: 200px;
height: 100px;
border: 2px solid #3498db; /* Blue solid border */
}
Importance of Borders
- Visually Appealing and Understanding: Borders help to separate elements on a webpage so that users can easily understand the navigation and layout of the file.
- Enhanced Focus: Any element can be highlighted with borders.
- Organized Structure: The web page’s content will be organized by borders as they can be applied to grids, tables, or boxes.
- Design and Visual Appearance: Different colors, styles, and width format helps to make dynamic borders which enhance the visual appearance.
Border Properties
One can style the following properties of the border
- Border Style: Solid line, dashed line, double line, or other potential value.
- Border Width: One can alter the width of the border as desired.
- Border Color: one can specify the color of the border according to the requirement.
Border Style
The border style property in CSS allows us to choose the border for any element. Border can be styled as solid, dashed, or dotted.
.solid-border {
border: 2px solid #2ecc71; /* Green solid border */
}
.dashed-border {
border: 2px dashed #e67e22; /* Orange dashed border */
}
.dotted-border {
border: 2px dotted #e74c3c; /* Red dotted border */
}Border styles allow users to choose how a border will be displayed in the HTML element. The following values are allowed:
- Dotted: a dotted border
- Dashed: a dashed border
- Solid: a solid border
- Double: a double border
- Groove: 3D grooved border. This effect relies on the color value of the border.
- Ridge: 3D ridge border. This effect is tied to the color value of the border.
- Inset: 3D inset border. This effect relies on the color value of the border.
- Outset: 3D outset border. This effect counts on the color value of the border.
- None: no borderr.Hidden: a hidden border
A border can be styled between one to four values corresponding to the right, left, top, and bottom border.
/* 1 value – applies to all four sides */
.border-all {
border: 2px solid #3498db;
}
/* 2 values – top & bottom, left & right */
.border-vertical-horizontal {
border: 2px solid #e67e22;
border-width: 4px 8px;
}
/* 3 values – top, left & right, bottom */
.border-three-values {
border: 2px solid #2ecc71;
border-width: 4px 8px 2px;
}
/* 4 values – top, right, bottom, left */
.border-four-values {
border: 2px solid #9b59b6;
border-width: 4px 6px 2px 10px;
}Border Width
The border width property allows one to choose the border thickness and customize it with predefined values( thick, thin, medium) or any length ( in, px, pt, cm, or em).
We can customize four sides (right, left, top, and bottom) of the width.
Border-style property has to be specified before the border width; otherwise, the effect will not be noticeable.
/* Border width with predefined values */
.border-thin {
border-style: solid;
border-width: thin;
border-color: #3498db;
}
/* Border width using custom units */
.border-px {
border-style: solid;
border-width: 4px;
border-color: #9b59b6;
}
/* Border with individual side widths */
.border-multi {
border-style: solid;
border-width: 2px 6px 4px 10px;
border-color: #34495e;
}Border Color
The color of the border can be specified. If the color is not chosen, then the color of the foreground will be set. The specific values of the following will be used to set the color:
Name: A predefined color name will specify the border color, like red.
HEX Values: HEX value can specify the border color.
RGB Values: RGB values are used to give color to the border
HSL Values: HSL values are used to give color to the border.
- Transparent
Note: If you do not choose the border color, then the color of the element will be inherited.
/* Using a named color */
.border-name {
border: 2px solid red;
}
/* Using a HEX color */
.border-hex {
border: 2px solid #3498db;
}
/* Using an RGB color */
.border-rgb {
border: 2px solid rgb(46, 204, 113);
}
/* Using an HSL color */
.border-hsl {
border: 2px solid hsl(45, 100%, 50%);
}
The border color can be specified for each side. The border width can have values between one and four, corresponding to the top, right, bottom, and left border.
.box {
border-style: solid;
border-width: 4px 6px 8px 10px;
border-color: red green blue orange;
padding: 20px;
width: 250px;
font-family: Arial, sans-serif;
}CSS Border for Individual Sides
Border for individual sides ( top, bottom, right, and left) can be customized in CSS. Here are some examples:
If the border style has four values:
Border style: dotted, double, dashed, solid:
- The top border is dotted
- The right border is double
- The bottom border is dashed
- The left border is solid
If the border style has three values:
Border style: dotted, double, dashed:
- The top border is dotted
- The right and left borders are double
- The bottom border is dashed
If the border style has two values:
Border style: dotted, dashed:
- The top and bottom borders are dotted
- The right and left borders are dashed
If the border style has one value:
Border style: solid:
- All four borders are solid.
/* 1 value: all sides solid */
.box1 {
border: 3px solid black;
}
/* 2 values: top/bottom | right/left */
.box2 {
border-width: 3px;
border-style: dotted dashed;
}
/* top | sides | bottom */
.box3 {
border-width: 3px;
border-style: dotted double dashed;
}
/* top | right | bottom | left */
.box4 {
border-width: 3px;
border-style: dotted double dashed solid;
}Border Shorthand Property
All individual properties of borders can be defined in a single property to cut down the code.
Shorthand border property can also be specified for only one side, along with the style, width, and color.
.all-border {
border: 2px solid blue;
}
.top-border {
border-top: 3px dashed red;
}Inline Element Borders
Borders can be applied to the inline elements, and the border’s thickness will not affect the line height. When the right and left borders are applied to an inline element, the text that is surrounded by the border will be shifted.
span.inline-border {
border-left: 2px solid red;
border-right: 2px solid blue;
padding: 0 5px;
}CSS Image As Border
CSS border-image property will set an image as the border of the elements. You must specify this style of the border before providing the image. Otherwise, the image will not be displayed.
.image-border {
border: 10px solid transparent;
border-image: url('border.png') 30 round;
}
CSS Rounded Property
One can make the edges of any desired element rounded with the CSS rounded property.
.rounded-box {
border: 2px solid #3498db;
border-radius: 15px; /* Makes the corners rounded */
}
CSS borders play an important role in organizing and structuring the content of a website. It enhances the functionality of the web as you can separate the web elements visually by CSS borders. One can easily customize any element in different styles by gaining command of the properties of the CSS borders, like style, width, and color.
