Loading...
Please wait.
Join LetsLearnLights for expert coding and programming guidance. Study popular languages like Java, Python and JavaScript. Improve your skills today

CSS Border Property and Related Properties: Examples and Explanation

Mnzr chauhanMnzr chauhan January 15, 2023

Description:

CSS borders are used to add a visual border around HTML elements. They can be styled using various properties such as border-width, border-style, and border-color. The border-width property sets the width of the border, and it can be set using pixels, ems, or percentages. The border-style property sets the style of the border, and it can be set to solid, dotted, dashed, double, groove, ridge, inset, or outset. The border-color property sets the color of the border, and it can be set using a color name, hex code, or RGB value. Additionally, you can use the shorthand border property to set all the border properties in one line.

Headlines.

CSS Border is a property used to add a border around an HTML element. It allows you to specify the color, width, and style of the border. The border property can be used to set all four borders (top, right, bottom, and left) of an element at once, or you can use the individual border properties (border-top, border-right, border-bottom, and border-left) to set each border separately.

The basic syntax for the border property is as follows:

border: width style color;

The width of the border can be set in pixels, ems, or percentage. The style of the border can be set to solid, dotted, dashed, double, groove, ridge, inset, or outset. The color of the border can be set to any valid CSS color value.

For example, the following CSS will create a 2px solid red border around an element:

border: 2px solid red;

In addition to the border property, there are several other border properties that can be used to fine-tune the appearance of your borders. These include:

  • border-radius: This property allows you to create rounded corners on your borders. You can specify the radius for each corner separately, or you can set a single radius for all four corners.
  • border-collapse: This property controls whether the borders of adjacent table cells are merged or separated.
  • border-spacing: This property is used to control the space between adjacent table cells when border-collapse is set to separate.
  • box-shadow: This property allows you to add a shadow around an element. You can specify the position, spread, and color of the shadow.
  • outline: This property is used to create an outline around an element. It works similarly to the border property, but the outline is drawn outside of the element's box, and it does not take up any space on the page.

In conclusion, the CSS Border property is a powerful tool that allows you to add visual interest and definition to your HTML elements. With its various properties and options, you can create a wide variety of border styles and effects to enhance the design of your website.

Advertise...

Explain in Details.

It is a shorthand property, which means that it can be used to set the values for multiple border-related properties at once.

The properties that can be set using the border property are:

  • border-width: sets the width of the border (can be set in pixels, ems, etc.)
  • border-style: sets the style of the border (e.g. solid, dotted, double, etc.)
  • border-color: sets the color of the border

The border property can be used in the following format: like border: width style color; For example: border: 2px solid red;

This sets a 2px wide, solid red border around the element.

You can also set different border properties for each side of an element using the following properties:

  • border-top, border-right, border-bottom, border-left

For example:


      
<style>
    .test1 {
        border-top: 2px solid red;
        border-right: 3px dotted blue;
        border-bottom: 1px dashed green;
        border-left: 4px double purple;
    }
</style>
<div class="test1">
    This div is for testing...
</div>
This div is for testing...

You can also set different border properties for each corner of an element using the following properties:

  • border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

For example:

<style>
    .test2 {
        border: 5px solid red;
        border-top-left-radius: 10px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 40px;
    }
</style>
<div class="test2">
    This div is for testing...
</div>
This div is for testing...
You can also use the border radius property to set all four border radius in one line. 
<style>
    .test3 {
        border: 5px solid red;
        border-radius: 10px 20px 30px 40px;
    }
</style>
<div class="test3">
    This div is for testing...
</div>
This div is for testing...

Here are some other border-related properties in CSS:

  • border-collapse: specifies whether or not table borders should be collapsed
The possible values for the CSS property border-collapse are:
  1. separate: This is the default value, and it causes each cell to have its own separate borders.
  2. collapse: This value causes the borders of adjacent cells to collapse into a single border.
  • border-image: allows you to use an image as the border of an element
The possible values for the CSS property border-image are:
  1. none (no border image)
  2. url("image.png") (specifying an image file as the border image)
  3. linear-gradient(to bottom, #ff0000, #0000ff) (using a linear gradient as the border image)
  4. repeating-linear-gradient(to right, #ff0000, #0000ff) (using a repeating linear gradient as the border image)
  5. radial-gradient(circle, #ff0000, #0000ff) (using a radial gradient as the border image)
  6. repeating-radial-gradient(ellipse at center, #ff0000, #0000ff) (using a repeating radial gradient as the border image)
  7. conic-gradient(from 0deg, #ff0000, #0000ff) (using a conic gradient as the border image)
  8. repeating-conic-gradient(from 90deg, #ff0000, #0000ff) (using a repeating conic gradient as the border image)
  9. cross-fade(url("image1.png"), url("image2.png"), 0.5) (using a cross-fade effect between two images as the border image)
  10. element(#id) (using an SVG element as the border image)
  11. paint(paintName) (using a named CSS Paint function as the border image)
  • border-spacing: sets the spacing between cells in a table
The possible values for the CSS property border-spacing are:
  1. A length value (e.g. "10px", "2em", "1cm")
  2. A percentage value (e.g. "5%", "20%")
  3. Two length values separated by a space (e.g. "10px 5px", "2em 1cm")
  4. Two percentage values separated by a space (e.g. "5% 10%", "20% 30%")
Note: The first value in the two length/percentage values represents the horizontal spacing and the second value represents the vertical spacing.
  • border-width: sets the width of an element's border
The possible values for the CSS property border-width are:
  1. A specific length (e.g. "5px", "1em")
  2. A percentage of the element's width or height (e.g. "50%")
  3. The keyword "thin"
  4. The keyword "medium" (default value)
  5. The keyword "thick"
  6. The keyword "initial" (sets the value to its default)
  7. The keyword "inherit" (inherits the value from the parent element)
  • border-radius: sets the roundedness of an element's corners
The possible values of border-radius are:
  1. A single value (e.g. "5px") which will apply the same radius to all four corners of the element.
  2. Two values (e.g. "5px 10px") which will apply the first value to the top-left and bottom-right corners, and the second value to the top-right and bottom-left corners.
  3. Three values (e.g. "5px 10px 15px") which will apply the first value to the top-left corner, the second value to the top-right and bottom-left corners, and the third value to the bottom-right corner.
  4. Four values (e.g. "5px 10px 15px 20px") which will apply the first value to the top-left corner, the second value to the top-right corner, the third value to the bottom-right corner, and the fourth value to the bottom-left corner.
  5. It's also possible to use percentage values for border-radius.
Note: The values should be in the order of top-left, top-right, bottom-right, bottom-left.
  • border-top-left-radius: sets the roundedness of the top-left corner of an element
The possible values for border-top-left-radius include:
  1. A length value (such as 10px, 2em, or 0.5in)
  2. A percentage value (such as 50%, 25%, or 0%)
  3. The keyword "inherit" (to inherit the value from the parent element)
  4. The keyword "initial" (to set the value back to its default value)
  5. The keyword "unset" (to unset the value and let the browser apply a default value)
Note that the border-top-left-radius property can also take two values, one for the horizontal radius and one for the vertical radius. In this case, the values are separated by a slash (/) and can be a combination of length and percentage values. For example, "10px/5%" would set a 10px horizontal radius and a 5% vertical radius.
  • border-top-right-radius: sets the roundedness of the top-right corner of an element
The possible values for the border-top-right-radius property include:
  1. A length value (such as "10px" or "2em")
  2. A percentage value (such as "50%" or "75%")
  3. The keyword "inherit" to inherit the value from the parent element
  4. The keyword "initial" to set the property to its default value
  5. The keyword "unset" to unset the property and fall back to the inherited or initial value.
  • border-bottom-left-radius: sets the roundedness of the bottom-left corner of an element
The possible values for border-bottom-left-radius are:
  1. A length value, such as "10px" or "2em"
  2. A percentage value, such as "50%"
  3. The keyword "inherit" to inherit the value from the parent element
  4. The keyword "initial" to set the property to its default value
  5. The keyword "unset" to unset the property and revert to the browser's default value.
  • border-bottom-right-radius: sets the roundedness of the bottom-right corner of an element
The possible values of border-bottom-right-radius are:
  1. A length value (e.g. "5px", "2em")
  2. A percentage value (e.g. "50%", "25%")
  3. The keyword "inherit" (inherits the value from the parent element)
  4. The keyword "initial" (sets the value to the default value)
  5. The keyword "unset" (removes any previously set value)
  • border-style: sets the style of an element's border
The possible values of CSS Property border-style are:
  1. solid - a solid line border
  2. dotted - a series of small dots forming a border
  3. dashed - a series of short dashes forming a border
  4. double - a double line border, with a space in between the two lines
  5. groove - a 3D border with a groove effect
  6. ridge - a 3D border with a ridge effect
  7. inset - a 3D border with an inset effect
  8. outset - a 3D border with an outset effect
  9. none - no border is displayed
  10. hidden - the border is hidden, but still takes up space in the layout
  11. inherit - inherits the border style from the parent element.
  • border-color: sets the color of an element's border
The possible values of CSS Property border-color are:
  1. "red" - sets the border color to red
  2. "#ff0000" - sets the border color to the hex code for red
  3. "rgb(255, 0, 0)" - sets the border color to the RGB values for red
  4. "transparent" - sets the border color to be transparent, making it invisible
  5. "inherit" - sets the border color to inherit the color of the parent element
  6. "currentColor" - sets the border color to the current color value of the element
  7. "none" - removes the border color, making the border invisible.
Note: CSS color are already described in "CSS / HTML colors, colors name, codes."
  • border-top: sets the top border of an element
The CSS property border-top is used to add a border to the top edge of an element. It can take several values, including:
  1. A length value (e.g. "2px"): This sets the width of the border in pixels.
  2. A percentage value (e.g. "10%"): This sets the width of the border as a percentage of the element's width.
  3. A keyword value (e.g. "thin", "medium", "thick"): This sets the width of the border to a predefined value.
  4. A color value (e.g. "red", "#ff0000"): This sets the color of the border.
  5. A shorthand value (e.g. "2px solid red"): This sets the width, style, and color of the border all in one declaration.
  6. none: This removes the top border from the element.
Example:
border-top: 2px solid red;
border-top: none;
border-top: 10% dashed #ff0000;
  • border-right: sets the right border of an element
border-right is a CSS property that is used to add a border to the right side of an element. It can take several values, including:
  1. A length value, such as "1px", which sets the width of the border in pixels.
  2. A percentage value, such as "5%", which sets the width of the border as a percentage of the element's total width.
  3. A keyword value, such as "thin", "medium", or "thick", which sets the width of the border based on predefined values.
  4. A color value, such as "red" or "#ff0000", which sets the color of the border.
  5. A shorthand value, such as "1px solid red", which sets the width, style, and color of the border all in one declaration.
  6. "none" is used to remove the border from the right side of an element.
Note: border-right can be used in combination with border-left, border-top, and border-bottom to control the border on all sides of an element.
  • border-bottom: sets the bottom border of an element
border-bottom is a CSS property that adds a border to the bottom of an HTML element. It can take several different values, including:
  1. A length value, such as "2px" or "1em", which sets the thickness of the border.
  2. A color value, such as "red" or "#333", which sets the color of the border.
  3. A border-style value, such as "solid", "dotted", or "double", which sets the style of the border.
  4. A shorthand value, such as "2px solid red", which sets all three values (thickness, style, and color) at once.
Examples of border-bottom values:

border-bottom: 2px solid red; (sets a 2px thick, solid, red border on the bottom of the element)
border-bottom: 1em dotted #333; (sets a 1em thick, dotted, #333 (dark gray) border on the bottom of the element)
border-bottom: none; (removes any existing border on the bottom of the element)
You can also use the individual properties of border-bottom such as border-bottom-width, border-bottom-color, border-bottom-style.
  • border-left: sets the left border of an element
border-left is a CSS property used to add a left border to an HTML element. It can take the following values:
  1. A length value (e.g. "5px", "1em") - this sets the width of the left border.
  2. A thickness keyword (e.g. "thin", "medium", "thick") - this sets the width of the left border based on a predefined thickness.
  3. A color value (e.g. "red", "#ff0000") - this sets the color of the left border.
  4. A shorthand value (e.g. "3px solid red") - this sets the width, style, and color of the left border all at once. The order is width, style, color.
  5. "none" - this removes any left border that may have been previously set.
  6. "initial" - this sets the left border to its default value.
  7. "inherit" - this inherits the left border value from the parent element.
Example:
border-left: 2px solid #ff0000; (This will set the left border width to 2px, style to solid and color to #ff0000)

Here are some additional CSS properties related to borders:

  • border-block-end: sets the border properties for the end edge of a block-level element
border-block-end is a CSS property that specifies the width, style, and color of the border on the bottom-right corner of an element. It is used in conjunction with the border-block-start, border-block-start-color, and border-block-end-color properties to create a more precise control over the border on all four corners of an element.

The possible values for border-block-end include:
  1. "thin" - a thin border
  2. "medium" - a medium-width border
  3. "thick" - a thick border
  4. <length> - a specific length value, such as "5px"
  5. "initial" - sets the border to its default value
  6. "inherit" - inherits the border value from its parent element
  7. Additionally, you can specify the style of the border using keywords such as "solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset", and "none".

Example:

.my-element { border-block-end: solid 5px #000; }

This will create a solid black border with a width of 5 pixels on the bottom-right corner of the element with the class "my-element".
  • border-block-start: sets the border properties for the start edge of a block-level element
border-block-start is a CSS property that defines the border properties for the start edge of a block-level element. It is a shorthand property that allows you to set the border-top, border-left, and border-right properties all at once. The possible values for border-block-start are:
  1. none: No border is applied to the start edge of the element
  2. <border-width> <border-style> <border-color>: This value allows you to set the width, style, and color of the border for the start edge. For example, "2px solid red" would create a 2px red solid border.
  3. inherit: The border-block-start property inherits the value of the parent element's border-block-start property.
It is important to note that the border-block-start property is currently only supported in Firefox. Other browsers do not support this property, and it is not part of the official CSS specification.
  • border-inline-end: sets the border properties for the end edge of an inline element
border-inline-end is a CSS property that sets the style, width, and color of the border on the end (right side for left-to-right languages) of an inline element.

Possible values for border-inline-end include:
  1. A specific length (e.g. "2px")
  2. A percentage (e.g. "5%")
  3. The keyword "medium" (which sets the border width to a medium value)
  4. The keyword "thin" (which sets the border width to a thin value)
  5. The keyword "thick" (which sets the border width to a thick value)
  6. The keyword "none" (which removes the border)
  7. A combination of the above values with a separator (e.g. "2px solid blue") where the first value represents the width, second value represents the style, and the third value represents the color.
Example:
border-inline-end: 3px solid red;

This CSS will create a 3px solid red border on the end (right side) of the inline element.
  • border-inline-start: sets the border properties for the start edge of an inline element
border-inline-start is a CSS property that sets the width, style, and color of the border on the start side of an inline element. It is used in conjunction with the border-inline-end, border-inline-start-width, border-inline-end-width, border-inline-start-style, and border-inline-end-style properties.

Possible values for border-inline-start include:
  1. A length value (e.g. "1px") sets the width of the border.
  2. A keyword value (e.g. "thin", "medium", "thick") sets the width of the border.
  3. A color value (e.g. "red", "#ff0000") sets the color of the border.
  4. A keyword value (e.g. "solid", "dotted", "dashed") sets the style of the border.
  5. "none" disables the border on the start side of the inline element.
  6. "initial" sets the property to its default value.
  7. "inherit" inherits the property from the parent element.
Example:

p { border-inline-start: 2px solid blue; }

This example sets the start side of all 'p' elements to have a 2px wide, solid blue border.
  • border-block-color: sets the color of the block-level element's border
border-block-color is a CSS property that sets the color of the block borders. It is used in conjunction with the border-block property to specify the color of the four borders (top, bottom, left, and right) of an element.

Possible values for border-block-color include:
  1. A valid color value such as "red", "rgb(255,0,0)", or "#ff0000"
  2. The keyword "transparent" which sets the border color to be transparent
  3. The keyword "currentColor" which sets the border color to the same as the element's current text color
Note: This property is not widely supported by all browsers. It is considered a draft feature and may not work as expected in all browsers.
  • border-inline-color: sets the color of the inline element's border
border-inline-color is a CSS property that sets the color of an inline element's border. It is typically used in combination with other border properties, such as border-inline-width and border-inline-style, to control the appearance of the border.

Possible values for border-inline-color include:
  1. A color keyword (e.g. "red", "blue", "green")
  2. A hex code (e.g. "#ff0000", "#0000ff", "#00ff00")
  3. An RGB or RGBA value (e.g. "rgb(255, 0, 0)", "rgba(0, 0, 255, 0.5)")
  4. The keyword "transparent"
For example, the following CSS code sets an inline element's border to be 2 pixels wide, solid, and red:
  • border-inline-width: 2px;
  • border-inline-style: solid;
  • border-inline-color: red;
Note that the border-inline-color property is not widely supported in current browsers. Instead of using it, you can use the border-color property.
  • border-block-width: sets the width of the block-level element's border
The CSS property border-block-width sets the width of the block-level borders of an element. It can take the following values:
  1. thin: a thin border (equivalent to 1px in most browsers)
  2. medium: a medium border (equivalent to 3px in most browsers)
  3. thick: a thick border (equivalent to 5px in most browsers)
  4. length: a specific length value in units such as px, em, or rem
  5. initial: sets the property to its default value
  6. inherit: inherits the value from the parent element
It is important to note that border-block-width is not yet supported by all major web browsers, so it's better to use the border-top-width, border-right-width, border-bottom-width, and border-left-width properties for cross-browser compatibility.
  • border-inline-width: sets the width of the inline element's border
The CSS property 'border-block-width' sets the width of the block-level borders of an element. It can take the following values:
  1. thin: a thin border (equivalent to 1px in most browsers)
  2. medium: a medium border (equivalent to 3px in most browsers)
  3. thick: a thick border (equivalent to 5px in most browsers)
  4. length: a specific length value in units such as px, em, or rem
  5. initial: sets the property to its default value
  6. inherit: inherits the value from the parent element
It is important to note that border-inline-width is not yet supported by all major web browsers, so it's better to use the border-top-width, border-right-width, border-bottom-width, and border-left-width properties for cross-browser compatibility.
  • border-block-style: sets the style of the block-level element's border

The CSS property border-block-style sets the style of the block-level borders of an element. It can take the following values:

  1. none: no border
  2. solid: a solid border
  3. dotted: a border with small dots
  4. dashed: a border with short dashes
  5. double: a double border, with the width of the border being the sum of the two single borders
  6. groove: a 3D grooved border
  7. ridge: a 3D ridged border
  8. inset: a 3D inset border
  9. outset: a 3D outset border
  10. initial: sets the property to its default value
  11. inherit: inherits the value from the parent element
It is important to note that border-block-style is not yet supported by all major web browsers, so it's better to use the border-top-style, border-right-style, border-bottom-style, and border-left-style properties for cross-browser compatibility.
  • border-inline-style: sets the style of the inline element's border

The CSS property border-inline-style sets the style of the inline-level borders of an element. It can take the following values:

  1. none: no border
  2. hidden: same as "none", but has different behavior in tables
  3. dotted: a series of round dots
  4. dashed: a series of short dashes
  5. solid: a solid border
  6. double: two parallel solid lines
  7. groove: a 3D inset border
  8. ridge: a 3D outset border
  9. inset: a 3D inset border
  10. outset: a 3D outset border
  11. initial: sets the property to its default value
  12. inherit: inherits the value from the parent element
It is important to note that border-inline-style is not yet supported by all major web browsers, so it's better to use the border-top-style, border-right-style, border-bottom-style, and border-left-style properties for cross-browser compatibility.

These properties are relatively new and not supported by all browsers, so you should check for browser compatibility before using them.

You can try all above Property one by one and check how they work....

Final Lines.

The CSS Border property is a powerful tool for creating visually appealing and structured layouts on web pages. It allows developers to add borders to elements such as images, text, and buttons, and customize the color, width, and style of these borders. However, it is important to note that different browsers may have varying levels of support for certain border properties, so it is crucial to test and ensure compatibility across different browsers when using this property. Overall, the CSS Border property is an essential tool for web designers and developers, but it is important to keep browser compatibility in mind when implementing it.

Posted by Mnzr chauhan
««« Thanks again for reading our blog. If you have any questions, feel free to ask. Your support is enough for us to share this post with your friends. And a good comment for our hard work. »»»
Thank you ツ
Mnzr chauhan

Posted by Mnzr chauhan

Post a Comment

0 Comments

Post a Comment