Главная » Языки программирования

Html border style top bottom

Содержание
  1. CSS Borders
  2. CSS Border Style
  3. Example
  4. border-style
  5. Try it
  6. Constituent properties
  7. Syntax
  8. Values
  9. Formal definition
  10. Formal syntax
  11. Examples
  12. All property values
  13. HTML
  14. CSS
  15. Result
  16. Specifications
  17. Browser compatibility
  18. See also
  19. Found a content problem with this page?
  20. MDN
  21. Support
  22. Our communities
  23. Developers
  24. border
  25. Try it
  26. Constituent properties
  27. Syntax
  28. Values
  29. Description
  30. Borders vs. outlines
  31. Formal definition
  32. Formal syntax
  33. Examples
  34. Setting a pink outset border
  35. HTML
  36. CSS
  37. Result
  38. Specifications
  39. Browser compatibility
  40. See also
  41. Found a content problem with this page?
  42. MDN
  43. Support
  44. Our communities
  45. Developers

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element’s border.

I have borders on all sides.

I have a red bottom border.

I have a blue left border.

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

  • dotted — Defines a dotted border
  • dashed — Defines a dashed border
  • solid — Defines a solid border
  • double — Defines a double border
  • groove — Defines a 3D grooved border. The effect depends on the border-color value
  • ridge — Defines a 3D ridged border. The effect depends on the border-color value
  • inset — Defines a 3D inset border. The effect depends on the border-color value
  • outset — Defines a 3D outset border. The effect depends on the border-color value
  • none — Defines no border
  • hidden — Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

Demonstration of the different border styles:

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!

Источник

border-style

The border-style shorthand CSS property sets the line style for all four sides of an element’s border.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Keyword values */ border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; /* top and bottom | left and right */ border-style: dotted solid; /* top | left and right | bottom */ border-style: hidden double dashed; /* top | right | bottom | left */ border-style: none solid dotted dashed; /* Global values */ border-style: inherit; border-style: initial; border-style: revert; border-style: revert-layer; border-style: unset;

The border-style property may be specified using one, two, three, or four values.

  • When one value is specified, it applies the same style to all four sides.
  • When two values are specified, the first style applies to the top and bottom, the second to the left and right.
  • When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
  • When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).

Each value is a keyword chosen from the list below.

Values

Describes the style of the border. It can have the following values:

Like the hidden keyword, displays no border. Unless a background-image is set, the computed value of the same side’s border-width will be 0 , even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.

Like the none keyword, displays no border. Unless a background-image is set, the computed value of the same side’s border-width will be 0 , even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won’t be displayed.

Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side’s border-width .

Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.

Displays a single, straight, solid line.

Displays two straight lines that add up to the pixel size defined by border-width .

Displays a border with a carved appearance. It is the opposite of ridge .

Displays a border with an extruded appearance. It is the opposite of groove .

Displays a border that makes the element appear embedded. It is the opposite of outset . When applied to a table cell with border-collapse set to collapsed , this value behaves like ridge .

Displays a border that makes the element appear embossed. It is the opposite of inset . When applied to a table cell with border-collapse set to collapsed , this value behaves like groove .

Formal definition

  • border-top-style : none
  • border-right-style : none
  • border-bottom-style : none
  • border-left-style : none
  • border-bottom-style : as specified
  • border-left-style : as specified
  • border-right-style : as specified
  • border-top-style : as specified

Formal syntax

border-style =

=
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

Examples

All property values

Here is an example of all the property values.

HTML

pre class="b1">nonepre> pre class="b2">hiddenpre> pre class="b3">dottedpre> pre class="b4">dashedpre> pre class="b5">solidpre> pre class="b6">doublepre> pre class="b7">groovepre> pre class="b8">ridgepre> pre class="b9">insetpre> pre class="b10">outsetpre>

CSS

pre  height: 80px; width: 120px; margin: 20px; padding: 20px; display: inline-block; background-color: palegreen; border-width: 5px; box-sizing: border-box; > /* border-style example classes */ .b1  border-style: none; > .b2  border-style: hidden; > .b3  border-style: dotted; > .b4  border-style: dashed; > .b5  border-style: solid; > .b6  border-style: double; > .b7  border-style: groove; > .b8  border-style: ridge; > .b9  border-style: inset; > .b10  border-style: outset; >

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 30, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

border

The border shorthand CSS property sets an element’s border. It sets the values of border-width , border-style , and border-color .

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* Global values */ border: inherit; border: initial; border: revert; border: revert-layer; border: unset;

The border property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Note: The border will be invisible if its style is not defined. This is because the style defaults to none .

Values

Sets the thickness of the border. Defaults to medium if absent. See border-width .

Sets the style of the border. Defaults to none if absent. See border-style .

Sets the color of the border. Defaults to currentcolor if absent. See border-color .

Description

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, border cannot be used to specify a custom value for border-image , but instead sets it to its initial value, i.e., none .

The border shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand border-width , border-style , and border-color properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start ) border properties.

Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

  • Outlines never take up space, as they are drawn outside of an element’s content.
  • According to the spec, outlines don’t have to be rectangular, although they usually are.

Formal definition

Оцените статью
© 2024 Программирование