gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Edit for readability, added Border-Image section (#20814)

Browse Source 
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.
This commit is contained in:
Aretha S. H. Walls
2018-11-03 12:33:25 -07:00
committed by Christopher McCormack
parent d76a72d673
commit 8ec35afac1
1 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
guide/english/css/borders/index.md
View File

@ -6,31 +6,29 @@ title: Border Property
CSS Border 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 ```css
border: 1px solid #000; 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` 1. `border-style`
2. `border-width` 2. `border-width`
3. `border-color` 3. `border-color`
4. `border-radius` 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 ```css
border: solid red; border: solid red;
``` ```
The above code is also valid CSS.
### Border Styles ### 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. - `dotted` - Sets a dotted border.
- `dashed` - Sets a dashed border. - `dashed` - Sets a dashed border.
- `solid` - Sets a solid border. - `solid` - Sets a solid border.
@ -42,8 +40,9 @@ The various values are:
- `none` - Sets no border. - `none` - Sets no border.
- `hidden` - Sets a hidden border. - `hidden` - Sets a hidden border.
Based on the property you choose, these styles can be mismatched. Each side of the border doesn't need to match.
You can style each side seperately:
Each side can be styled separately:
```css ```css
border-top-style: solid; border-top-style: solid;
border-left-style: dotted; border-left-style: dotted;
@ -51,17 +50,16 @@ You can style each side seperately:
border-bottom-style: double; border-bottom-style: double;
``` ```
Or you can style them all at once: Or they can all be styled at once:
```css ```css
border-style: solid dashed double dotted; 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 ### 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 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.
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 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`.
values: thin, medium, or thick.
Example: Example:
```css ```css
@ -83,8 +81,8 @@ p {
### Border Color ### 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 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, hexadecimal, or key terms. Below is an example of each of these types. of your website. Border colors can be any color defined by RGB, HSL, hexadecimal, or key terms.
Example: Example:
```css ```css
@ -107,19 +105,31 @@ p {
``` ```
### Border-Radius ### 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 ```css
border-radius: 25px; 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 ```css
border-radius: 15% 10px 30% 5px; 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 ### 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: Example:
```css ```css
@ -135,9 +145,4 @@ h5 { border: dotted; }
- [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/border) - [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
- [CSS3 Border Radius](https://guide.freecodecamp.org/css/css3-borders-rounded-corners) - [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+ Browser Support: IE6+