Edit for readability, added Border-Image section (#20814)
Made a few punctuation edits and rephrased sentences. Added border-image section. Removed other properties section because border-image is now its own section and border-spacing is a table property and not related to other border properties.pull/34187/head
Aretha S. H. Walls
Christopher McCormack
parent
d76a72d673
commit
8ec35afac1
|
|
@ -6,31 +6,29 @@ title: Border Property
|
|||
CSS Border
|
||||
----
|
||||
|
||||
Our personal favorite CSS attribute, allows you to completely customize the borders that appear around HTML elements. With HTML, it used to be impossible to place a border around an element, except for the table. CSS Borders lets you create crisp and customized border styles with very little work, compared to the antiquated methods of HTML.
|
||||
The CSS property `border` allows complete customization of the borders that appear around HTML elements. With HTML, it used to be impossible to place a border around an element, with the exception of tables. CSS Borders let you create crisp, custom border styles with very little work compared to antiquated HTML methods.
|
||||
|
||||
The `border` shorthand property sets all the border properties in one declaration.
|
||||
The `border` shorthand property sets all border properties in one declaration.
|
||||
```css
|
||||
border: 1px solid #000;
|
||||
```
|
||||
|
||||
The properties that can be set, are (in order):
|
||||
The properties that can be set are (in order):
|
||||
1. `border-style`
|
||||
2. `border-width`
|
||||
3. `border-color`
|
||||
4. `border-radius`
|
||||
|
||||
It does not matter if one of the values above are missing, for example:
|
||||
It does not matter if one of the values above is missing. For example, the following is valid CSS:
|
||||
|
||||
```css
|
||||
border: solid red;
|
||||
```
|
||||
The above code is also valid CSS.
|
||||
|
||||
### Border Styles
|
||||
|
||||
The `border-style` property sets a wide range of different types of borders.
|
||||
The `border-style` property can be set to a wide range of different border types:
|
||||
|
||||
The various values are:
|
||||
- `dotted` - Sets a dotted border.
|
||||
- `dashed` - Sets a dashed border.
|
||||
- `solid` - Sets a solid border.
|
||||
|
|
@ -42,8 +40,9 @@ The various values are:
|
|||
- `none` - Sets no border.
|
||||
- `hidden` - Sets a hidden border.
|
||||
|
||||
Based on the property you choose, these styles can be mismatched.
|
||||
You can style each side seperately:
|
||||
Each side of the border doesn't need to match.
|
||||
|
||||
Each side can be styled separately:
|
||||
```css
|
||||
border-top-style: solid;
|
||||
border-left-style: dotted;
|
||||
|
|
@ -51,17 +50,16 @@ You can style each side seperately:
|
|||
border-bottom-style: double;
|
||||
```
|
||||
|
||||
Or you can style them all at once:
|
||||
Or they can all be styled at once:
|
||||
```css
|
||||
border-style: solid dashed double dotted;
|
||||
```
|
||||
As shown, the border property allows you to select different sections of it. [top, bottom, left, right]
|
||||
The border property allows you to select each side of the element in one declaration in the following order: top, bottom, left, right.
|
||||
|
||||
### Border Width
|
||||
|
||||
To alter the thickness of your border use the border-width attribute. You may use key terms or exact values to define the border width. Note: You must
|
||||
define a border-style for the border to show up. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined
|
||||
values: thin, medium, or thick.
|
||||
To alter the thickness of a border, use the `border-width` attribute. You may use key terms or exact values to define the border width.
|
||||
Note: You must define a `border-style` for the border to appear. The `width` can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: `thin`, `medium`, or `thick`.
|
||||
|
||||
Example:
|
||||
```css
|
||||
|
|
@ -83,8 +81,8 @@ p {
|
|||
|
||||
### Border Color
|
||||
|
||||
Now for the creative aspect of CSS Borders! With the use of the border-color attribute, you will be able to create customized borders to fit the flow and layout
|
||||
of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of each of these types.
|
||||
Now for the creative aspect of CSS Borders! With the use of the `border-color` property, you will be able to create customized borders to fit the flow and layout
|
||||
of your website. Border colors can be any color defined by RGB, HSL, hexadecimal, or key terms.
|
||||
|
||||
Example:
|
||||
```css
|
||||
|
|
@ -107,19 +105,31 @@ p {
|
|||
```
|
||||
|
||||
### Border-Radius
|
||||
The `border-radius` property allows the corners of a border to be rounded. This is done by providing a size for
|
||||
how much the border is to be rounded. Size can be in px or %.
|
||||
|
||||
The `border-radius` property allows the corners of a border to be rounded. `border-radius` takes a length as its value which determines the degree of curvature for each corner of the element. The length can be in px or %.
|
||||
```css
|
||||
border-radius: 25px;
|
||||
```
|
||||
Each corner of `border-radius` can be adjusted. The order is top, bottom, left, right.
|
||||
Each corner of `border-radius` can be adjusted individually in the following order: top, bottom, left, right.
|
||||
```css
|
||||
border-radius: 15% 10px 30% 5px;
|
||||
```
|
||||
|
||||
### Border-Image
|
||||
|
||||
The `border-image` property allows you to use an image as a custom border style. `border-image` is a shorthand for `border-image-source`, `border-image-width`, `border-image-outset`, and `border-image-repeat`.
|
||||
|
||||
`border-image-source` takes the url of the image you'd like to set as the border.
|
||||
|
||||
`border-image-width` sets the width of the image.
|
||||
|
||||
`border-image-outset`sets the distance between the element and the border image.
|
||||
|
||||
`border-image-repeat` adjusts the way border images adjust to the element's edges.
|
||||
|
||||
### Border: All in One
|
||||
|
||||
While it is nice that CSS allows a web developer to be very specific in creating a customized border, sometimes it is just easier and less of a headache to create a uniform border, all in single line of CSS code.
|
||||
While it is nice that CSS allows a web developer to be very specific in creating a customized border, sometimes it's easier and less of a headache to create a uniform border in single line of CSS code. The `border` shorthand property allows us to declare a width, style, color, and radius.
|
||||
|
||||
Example:
|
||||
```css
|
||||
|
|
@ -135,9 +145,4 @@ h5 { border: dotted; }
|
|||
- [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
|
||||
- [CSS3 Border Radius](https://guide.freecodecamp.org/css/css3-borders-rounded-corners)
|
||||
|
||||
### Other Border Attributes
|
||||
- 'border-radius' - This can set radius of the border.
|
||||
- 'border-spacing' - This can set spacing between the text and border.
|
||||
- 'border-image' - This sets an image as border.
|
||||
|
||||
Browser Support: IE6+
|
||||
|
|
|
|||
Loading…
Reference in New Issue