CSS Borders
We can customise the border's style, colour, and width using CSS border attributes.
Note: The top border, right border, bottom border, and left border can all have various characteristics set.
Properties of CSS Borders are as follows:
1. Border Style
- CSS border-top style Property
- border-right-style Property
- border-bottom-style Property
- border-left-style Property
2. Border Width
- border-top-width Property
- border-right-width Property
- border-bottom-width Property
- border-left-width Property
3. Border Color
- border-top-color Property
- border-right-color Property
- border-bottom-color Property
- border-left-color Property
1. Border Style :
The style of the border is determined by the border-style attribute. Without setting the border style, none of the further border settings will function.
The many border types are as follows:
- Dotted: It defines a dotted border.
- Dashed: It defines a dashed border.
- Solid: It defines a solid border.
- Double: It defines a Double border.
- groove: It defines a 3D grooved border
- ridge – It defines a 3D ridged border.
- inset – It defines a 3D inset border.
- outset – It defines a 3D outset border.
- none – It defines no border
- hidden – It defines the hidden border
2. Border Width :
The border's width is determined by this setting. The border's width can be specified in px, pt, cm, or as thin, medium, or thick.
3. Border Color :
The border's colour can be changed using this property. The RGB value, hex value, and colour name can all be used to change the colour. The colour of the element itself is inherited by the border if no colour is provided.
4. Border Individual Sides :
By using the border property, we can individually set the width, style, and colour of each border. To do this, we must assign values to each border side.
FAQs
To create rounded borders in CSS, you can use the border-radius property. This property sets the radius of the border corners. For example, to make all four corners of a border rounded with a radius of 10 pixels, you can use the following CSS code:
border-radius: 10px;You can also set different radii for each corner by specifying four values. For example, to make the top left and bottom right corners rounded with a radius of 10 pixels, and the top right and bottom left corners rounded with a radius of 5 pixels, you can use the following CSS code:
border-radius: 10px 5px;
This will create a rounded border on the element you apply it to.
To create a border around a link or button on hover in CSS, you can use the :hover pseudo-class. First, set the border properties for the link or button element. Then, add a second set of border properties within the :hover pseudo-class to specify the border style, width, and color on hover. Here's an example:
a {
border: 1px solid black;
padding: 10px;
text-decoration: none;
}
a:hover {
border: 2px dashed blue;
}In this example, the link will have a 1px solid black border by default, and when hovered over, will have a 2px dashed blue border. The padding property is used to add some space between the text and the border.
To create a border that changes color or style on different states such as when clicked or focused in CSS, you can use the :active and :focus pseudo-classes. The :active pseudo-class applies when an element is being clicked or activated, while the :focus pseudo-class applies when an element has focus. For example, you can create a button with a solid red border that changes to a dashed blue border when clicked using the following CSS:
button {
border: 2px solid red;
padding: 10px;
}
button:active {
border-style: dashed;
border-color: blue;
}
button:focus {
outline: none;
}In this example, the button element has a solid red border and 10 pixels of padding. When the button is clicked, the border style changes to dashed and the border color changes to blue. Finally, the :focus pseudo-class is used to remove the default outline that appears around focused elements in some browsers.