<div>
<h1 id="myH1"> A heading with a solid red border</h1>
<h2 id="myH2">A heading with a dotted blue border</h2>
<div id="myDiv1">A div element with a double border.</div>
</div>
<style>
#myH1 {border: 0.5vw solid red;}
#myH2 {border: 0.4vw dotted blue;}
#myDiv1 {border: double;}
</style>
- is a shorthand property for these properties : border-block-width, border-block-style (required), border-block-color.
- if values for color or width are omitted, default values will be used.
The CSS "border-block property" is very similar to CSS property "border", but the border-block property is dependent on block direction. The related CSS property "writing-mode" defines block direction. This affects where the start and end of a block is and the result of the border-block property. For pages in English, inline direction is left to right and block direction is downward..
A heading with a solid red border in the block direction
A heading with a dotted blue border in the block direction
A div element with a double border in the block direction.
With writing-mode set to "vertical-rl", the borders affected by the border-block property is on the left and right.
code:
<div>
<h1 id="myH1-a"> A heading with a solid red border in the block direction</h1>
<h2 id="myH2-a">A heading with a dotted blue border in the block direction</h2>
<div id="myDiv1-a">A div element with a double border in the block direction.</div><br>
<div id="myDiv1-b"><p>With writing-mode set to "vertical-rl", the borders affected by the
border-block property is on the left and right.</p></div>
</div>
<style>
#myH1-a {background-color: burlywood; border-block: 0.5vw solid red;}
#myH2-a {background-color: burlywood; border-block: 0.4vw dotted blue;}
#myDiv1-a {background-color: burlywood; border-block: double;}
#myDiv1-b {background-color: burlywood; inline-size: 15vw; padding: 1vw; writing-mode: vertical-rl;
border-block: double;}
</style>
- sets the color of an element's borders in the block direction.
- for the border-block-color property to take effect, the border-block-style must be set.
Values for the border-block-color property can be set in different ways:
If the border-block-color property has two values: {border-block-color: pink lightblue;} : border color at block start is pink, border color at block end is lightblue.
If the border-block-color property has one value: {border-block-color: pink;} : border color at block start and end is pink.
The CSS border-block-color property is very similar to CSS properties "border-bottom-color", "border-left-color", "border-right-color" and "border-top-color", but the border-block-color property is dependent on block direction. The writing-mode ptoprty defines block direction. This affects where the start and end of a block is and the result of the border-block-color property. For pages in English, inline direction is left to right and block direction is downward.
The border-block-color property defines the color of the borders in the block direction.
border-block-color: pink lightblue:
If two values are set; the first one is for the start in the block direction, and the second one is for the end in the block direction.
With writing-mode property value set to 'vertical-rl', the borders affected by the border-block-color property is on the left and right.
code:
& lt;div>
<h2 class="myH2-b">border-block-color: pink:</h2>
<div class="myDiv2" id="example1">
<p>The border-block-color property defines the color of the borders in the block direction.</p>
</div>
<h2 class="myH2-b">border-block-color: pink lightblue:</h2>
<div class="myDiv2" id="example2">
<p>If two values are set; the first one is for the start in the block direction, and the second one
is for the end in the block direction.</p>
</div>
<div class="myDiv2-a">
<p>With writing-mode property value set to 'vertical-rl', the borders affected by the
border-block-color property is on the left and right.</p>
</div>
</div>
<style>
.myH2{font-size: 1.5vw; color: black; text-decoration:none;}
.myDiv2 {background-color: lightgreen; inline-size: 70%; border-block-width: 10px;}
.myDiv2-a{ background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-block-width: 0.5vw;
writing-mode: vertical-rl; border-block-style: solid; border-block-color: blue;}
#example1 { border-block-style: solid; border-block-color: pink; }
#example2 {border-block-style: solid; border-block-color: pink lightblue;}
</style>
The border-block-end-color property defines the color of the border at the end in the block direction.
border-block-end-color: blue:
With writing-mode property value set to 'vertical-rl', the border affected by the border-block-end-color property is on the left.
code:
<div>
<h4>border-block-end-color: pink:</h4>
<div class="myDiv3">
<p>The border-block-end-color property defines the color of the border at the end in the
block direction.</p>
</div>
<h4>border-block-end-color: blue:</h4>
<div class="myDiv3-a">
<p>With writing-mode property value set to 'vertical-rl', the border affected by the
border-block-end-color property is on the left.</p>
</div>
</div>
<style>
.myDiv3 {background-color: lightgreen; inline-size: 70%; border-block-end-width: 1vw;
border-block-end-style: solid; border-block-end-color: pink;}
.myDiv3-a { background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-block-end-width: 0.5vw; writing-mode:
vertical-rl; border-block-end-style: solid; border-block-end-color: blue;}
</style>
The border-block-end-style property defines the style of the border at the end in the block direction.
border-block-end-style: dotted:
With writing-mode property value set to 'vertical-rl', the border affected by the border-block-end-style property is on the left.
code:
<div>
<h4>border-block-end-style: dotted:</h4>
<div class="myDiv4">
<p>The border-block-end-style property defines the style of the border at the end in the
block direction.</p>
</div>
<h4>border-block-end-style: dotted:</h4>
<div class="myDiv4-a">
<p>With writing-mode property value set to 'vertical-rl', the border affected by the
border-block-end-style property is on the left.</p>
</div>
</div>
<style>
.myDiv4 {background-color: lightgreen; inline-size: 70%; border-block-end-width: 1vw;
border-block-end-style: dotted;}
.myDiv4-a{background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-block-width: 0.5vw;
writing-mode: vertical-rl; border-block-end-style: dotted;}
</style>
The border-block-end-width property defines the width of the border at the end in the block direction.
border-block-end-width: 0.5vw:
With writing-mode property value set to 'vertical-rl', the border affected by the border-block-end-width property is on the left.
code:
<div>
<h4>border-block-end-width: 1vw:</h4>
<div class="myDiv5">
<p>The border-block-end-width property defines the width of the border at the end in
the block direction.</p>
</div>
<h4>border-block-end-width: 0.5vw:</h4>
<div class="myDiv5-a">
<p>With writing-mode property value set to 'vertical-rl', the border affected by the
border-block-end-width property is on the left.</p>
</div>
</div>
<style>
.myDiv5 {background-color: lightgreen; inline-size: 70%; border-block-end-style: solid;
border-block-end-width: 1vw;}
.myDiv5-a {background-color: lightgreen; inline-size: 20vw; border-block-end-style: solid;
writing-mode: vertical-rl; border-block-end-width: 0.5vw;}
</style>
- sets the color of an element's border at the start in the block direction. - for the border-block-start-color property to take effect, the border-block-start-style property must be set.
The border-block-start-color property defines the color of the border at the start in the block direction.
border-block-start-color: blue:
With writing-mode property value set to 'vertical-rl', the border affected by the border-block-start-color property is on the right.
code:
<div>
<h4>border-block-start-color: pink:</h4>
<div class="myDiv6">
<p>The border-block-start-color property defines the color of the border at the start
in the block direction.</p>
</div>
<h4>border-block-start-color: blue:</h4>
<div class="myDiv6-a">
<p>With writing-mode property value set to 'vertical-rl', the border affected by the
border-block-start-color property is on the right.</p>
</div>
</div>
<style>
.myDiv6 {background-color: lightgreen; inline-size: 70%; border-block-start-width: 1vw;
border-block-start-style: solid; border-block-start-color: pink;}
.myDiv6-a { background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-block-width: 0.5vw;
writing-mode: vertical-rl; border-block-style: solid; border-block-start-color: blue;}
</style>
The border-block-end-style property defines the style of the border at the end in the block direction.
border-block-start-style: dotted:
With writing-mode property value set to 'vertical-rl', the border affected by the border-block-end-style property is on the left.
code:
<div>
<h4>border-block-start-style: dotted:</h4>
<div class="myDiv7">
<p>The border-block-end-style property defines the style of the border at the end in the
block direction.</p>
</div>
<h4>border-block-start-style: dotted:</h4>
<div class="myDiv7-a">
<p>With writing-mode property value set to 'vertical-rl', the border affected by the
border-block-end-style property is on the left.</p>
</div>
</div>
<style>
.myDiv7 {background-color: lightgreen; inline-size: 70%; border-block-start-width: 1vw;
border-block-start-style: dotted;}
.myDiv7-a{background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-block-width: 0.5vw;
writing-mode: vertical-rl; border-block-start-style: dotted;}
</style>
- sets the width of an element's border at the start in the block direction. - for the border-block-start-width property to take effect, the border-block-start-style property must be set.
The border-block-start-width property defines the width of the border at the start in the block direction.
border-block-end-width: 0.5vw:
With writing-mode property value set to 'vertical-rl', the border affected by the border-block-start-width property is on the right.
code:
<div>
<h4>border-block-end-width: 1vw:</h4>
<div class="myDiv8">
<p>The border-block-start-width property defines the width of the border at the start in the
block direction.</p>
</div>
<h4>border-block-end-width: 0.5vw:</h4>
<div class="myDiv8-a">
<p>With writing-mode property value set to 'vertical-rl', the border affected by the
border-block-start-width property is on the right.</p>
</div>
</div>
<style>
.myDiv8 {background-color: lightgreen; inline-size: 70%; border-block-start-style: solid;
border-block-start-width: 1vw;}
.myDiv8-a {background-color: lightgreen; inline-size: 20vw; border-block-start-style: solid;
writing-mode: vertical-rl; border-block-start-width: 0.5vw;}
</style>
- sets the style of an element's borders in the block direction. - values for the border-block-style property can be set in different ways:
If the border-block-style property has two values: {border-block-style: dashed dotted;} : border style at block start is dashed, border style at block end is dotted. If the border-block-style property has one value: {border-block-style: dashed;} : border style at block start and end is dashed.
The CSS border-block-style property is very similar to CSS properties "border-bottom-style", "border-left-style", "border-right-style" and "border-top-style", but the border-block-style property is dependent on block direction.
The border-block-style property defines the style of the border at the start and end in the block direction.
border-block-style: dashed dotted:
If two values are set; the first one is for the start in the block direction, and the second one is for the end in the block direction.
code:
<div>
<h4>border-block-style: solid:</h4>
<div id="example1-a" class="myDiv9">
<p>The border-block-style property defines the style of the border at the start and end in the
block direction.</p>
</div>
<h4>border-block-style: dashed dotted:</h4>
<div id="example2-a" class="myDiv9-a">
<p>If two values are set; the first one is for the start in the block direction, and the second
one is for the end in the block direction.</p>
</div>
</div>
<style>
.myDiv9, .myDiv9-a { background-color: lightgreen; inline-size: 70%; border-block-width: 0.5vw;}
#example1-a { border-block-style: solid;}
#example2-a { border-block-style: dashed dotted;}
</style>
- sets the width of an element's borders in the block direction. For the border-block-width property to take effect, the border-block-style must be set.
- values for the border-block-width property can be set in different ways:
If the border-block-width property has two values: {border-block-width: 10px 50px;} : border width at block start is 10px, border width at block end is 50px. If the border-block-width property has one value: {border-block-width: 10px;} : border width at block start and end is 10px
The border-block-style property defines the width of the border at the start and end in the block direction.
border-block-width: thin thick:
If two values are set; the first one is for the start in the block direction, and the second one is for the end in the block direction.
code:
<div>
<h4>border-block-width: 10px:</h4>
<div id="example1-b" class="myDiv10">
<p>The border-block-style property defines the width of the border at the start and end in
the block direction.</p>
</div>
<h4>border-block-width: thin thick:</h4>
<div id="example2-b" class="myDiv10-a">
<p>If two values are set; the first one is for the start in the block direction, and the
second one is for the end in the block direction.</p>
</div>
</div>
<style>
.myDiv10, .myDiv10-a { background-color: lightgreen; inline-size: 70%; border-block-start-style: solid;}
#example1-b { border-block-style: solid; border-block-width: 0.6vw}
#example2-b { border-block-style: solid; border-block-width: thin thick;}
</style>
- is a shorthand property for (in the following order): "border-bottom-width", "border-bottom-style", "border-bottom-color". - if border-bottom-color is omitted, the color applied will be the color of the text.
Note: always declare the border-style or the border-bottom-style property before the border-bottom-color property. An element must have a border before you can change the color.
The border-bottom-color can be specified with a color name.
The border-bottom-color can be specified with an RGB value.
The border-bottom-color can be transparent.
code:
<div>
<h1 id="H1-b">A heading with a colored bottom border</h1>
<div id="Div2">The border-bottom-color can be specified with a color name.</div><br>
<div id="Div3">The border-bottom-color can be specified with an RGB value.</div><br>
<div id="Div4">The border-bottom-color can be transparent.</div>
</div>
<style>
#H1-b {border-bottom-style: solid; border-bottom-color: coral;}
#Div2 {border-style: solid; border-bottom-color: coral;}
#Div3 {border-style: solid; border-bottom-color: rgb(201, 76, 76);}
#Div4 {border-style: solid; border-bottom-color: transparent;}
</style>
The border-bottom-left-radius property defines the radius of the bottom-left corner.
border-bottom-left-radius: 5vw 2vw:
If two values are set; the first one is for the bottom border, the second one for the left border.
code:
<div>
<h4>border-bottom-left-radius: 2.5vw:</h4>
<div id="Div5">
<p>The border-bottom-left-radius property defines the radius of the bottom-left
corner.</p>
</div>
<h4>border-bottom-left-radius: 5vw 2vw:</h4>
<div id="Div6">
<p>If two values are set; the first one is for the bottom border, the second one for the
left border.</p>
</div>
</div>
<style>
#Div5 {border: 0.2vw solid red; padding: 1vw; border-bottom-left-radius: 2.5vw;}
#Div6 {border: 0.2vw solid red; padding: 1vw; border-bottom-left-radius: 5vw 2vw;}
</style>
The border-bottom-right-radius property defines the radius of the bottom-right corner.
border-bottom-right-radius: 5vw 2vw:
If two values are set; the first one is for the bottom border, the second one for the right border.
code:
<div>
<h4>border-bottom-right-radius: 2.5vw:</h4>
<div id="Div7">
<p>The border-bottom-right-radius property defines the radius of the bottom-right
corner.</p>
</div>
<h4>border-bottom-right-radius: 5vw 2vw:</h4>
<div id="Div8">
<p>If two values are set; the first one is for the bottom border, the second one for the
right border.</p>
</div>
</div>
<style>
#Div7 {border: 0.2vw solid red; padding: 1vw; border-bottom-right-radius: 2.5vw;}
#Div8 {border: 0.2vw solid red; padding: 1vw; border-bottom-right-radius: 5vw 2vw;}
</style>
<div>
<h1 id="H1-c"> A heading with a dotted bottom border</h1>
<div id="Div9">A div element with a dotted bottom border.</div>
</div>
<style>
#H1-c {border-bottom-style: dotted;}
#Div9 {border-style: solid; border-bottom-style: dotted;}
</style>
Note: always declare the "border-style" or the "border-bottom-style" property before the border-bottom-width property. An element must have borders before you can change the width.
- sets the color of an element's four borders. This property can have from one to four values.
- if the border-color property has four values: {border-color: red green blue pink;} :top border is red, right border is green, bottom border is blue, left border is pink. - if the border-color property has three values: {border-color: red green blue;} : top border is red, right and left borders are green, bottom border is blue. - if the border-color property has two values:{border-color: red green;} : top and bottom borders are red, right and left borders are green. - if the border-color property has one value: {border-color: red;} : all four borders are red.
Note: Always declare the border-style property before the border-color property. An element must have borders before you can change the color.
The border-color can be specified with a color name.
The border-color can be specified with more color names.
The border-color can be specified with more color names.
code:
<div>
<h1 id="H1-f">A heading with a colored border</h1>
<div id="Div11">The border-color can be specified with a color name.</div><br>
<div id="Div12">The border-color can be specified with a color name.</div><br>
<div id="Div13">The border-color can be specified with a color name.</div>
</div>
<style>
#H1-f{border-style: solid; border-color: coral;}
#Div11{border-style: solid; border-color: coral; }
#Div12{border-style: solid; border-color: black yellow red blue; }
#Div13{border-style: solid; border-color: yellow red; }
</style>
- defines the radius of the corner at the end in the block and inline directions.
- values for the border-end-end-radius property can be set in different ways:
If the border-end-end-radius property has two values: {border-end-end-radius: 10px 50px;} : radius at block end is 10px
radius at inline end is 50px/ If the border-end-end-radius property has one value:{border-end-end-radius: 10px;} : radius at block and inline end corner is 10px.
The CSS border-end-end-radius property is very similar to CSS properties "border-bottom-left-radius", "border-bottom-right-radius", "border-top-left-radius" and "border-top-right-radius", but the border-end-end-radius property is dependent on block and inline directions. Note: The related CSS properties "writing-mode", "text-orientation" and "direction" define block and inline directions. That is why these properties also affects the result of the border-end-end-radius property. For pages in English, inline direction is left to right and block direction is downward.
The border-end-end-radius property defines the radius of the corner in the end of block and inline directions.
If two values are set; the first one is for the end in the block direction, and the second one is for the end in the inline direction.
With direction property value set to 'rtl', the end of inline direction is now on the left side of the element, and so the result of the border-end-end-radius property is also changed.
code:
<div>
<div id="Div14">
<p>The border-end-end-radius property defines the radius of the corner in the end
of block and inline directions.</p>
</div><br>
<div id="Div15">
<p>If two values are set; the first one is for the end in the block direction, and
the second one is for the end in the inline direction.</p>
</div><br>
<div id="Div16">
<p>With direction property value set to 'rtl', the end of inline direction is now on
the left side of the element, and so the result of the border-end-end-radius property is
also changed.</p>
</div>
</div>
<style>
#Div14 {border: 0.2vw solid red; padding: 1vw; border-end-end-radius: 2.5vw;}
#Div15 {border: 0.2vw solid red;padding: 1vw; border-end-end-radius: 5vw 2vw;}
#Div16 {border: 0.2vw solid red;padding: 1vw; direction: rtl; border-end-end-radius: 5vw 2vw;}
</style>
- defines the radius of the corner at the end in the block direction and the start in the inline directions.
- values for the border-end-start-radius property can be set in different ways:
If the border-end-start-radius property has two values: {border-end-start-radius: 10px 50px;} : radius at block end is 10px, radius at inline start is 50px/ If the border-end-start-radius property has one value:{border-end-start-radius: 10px;} : radius at corner of block end and inline start is 10px.
The CSS border-end-start-radius property is very similar to CSS properties "border-bottom-left-radius", "border-bottom-right-radius", "border-top-left-radius" and "border-top-right-radius", but the border-end-start-radius property is dependent on block and inline directions. Note: The related CSS properties "writing-mode", "text-orientation" and "direction" define block and inline directions. That is why these properties also affects the result of the border-end-end-radius property. For pages in English, inline direction is left to right and block direction is downward.
The border-end-start-radius property defines the radius of the corner in the end of block direction and at the start of inline direction.
If two values are set; the first one is for the end in the block direction, and the second one is for the start in the inline direction.
With direction property value set to 'rtl', the end of inline direction is now on the left side of the element, and so the result of the border-end-end-radius property is also changed.
code:
<div id="Div17">
<p>The border-end-start-radius property defines the radius of the corner in the end of
block direction and at the start of inline direction.</p>
</div><br>
<div id="Div18">
<p>If two values are set; the first one is for the end in the block direction, and the
second one is for the start in the inline direction.</p>
</div><br>
<div id="Div19">
<p>With direction property value set to 'rtl', the end of inline direction is now on the
left side of the element, and so the result of the border-end-end-radius property is also
changed.</p>
</div>
</div>
<style>
#Div17 {border: 0.2vw solid red; padding: 1vw; border-end-start-radius: 2.5vw;}
#Div18 {border: 0.2vw solid red;padding: 1vw; border-end-start-radius: 5vw 2vw;}
#Div19 {border: 0.2vw solid red;padding: 1vw; direction: rtl; border-end-start-radius: 5vw 2vw;}
</style>
- allows you to specify an image to be used as the border around an element. - the property is a shorthand property for:
"border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"
- specifies the amount by which the border image area extends beyond the border box.
The border-image-outset property can take from one to four values (top, right, bottom, and left sides). If the fourth value is omitted, it is the same as the second. If the third one is also omitted, it is the same as the first. If the second one is also omitted, it is the same as the first.
stretch : default value. The image is stretched to fill the area
repeat : the image is tiled (repeated) to fill the area
round : the image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so it fits
space : te image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Here, the image is tiled to fill the area. Tiles are divided if necessary.
Here, the image is tiled to fill the area. The image is rescaled if necessary, to avoid dividing tiles.
Here, the image is tiled to fill the area. Extra space is distributed around the tiles if necessary.
Here is the original image:
code:
<div>
<p id="borderimg-a">Here, the image is stretched to fill the area.</p>
<p id="borderimg-b">Here, the image is tiled to fill the area. Tiles are divided if necessary.</p>
<p id="borderimg-c">Here, the image is tiled to fill the area. The image is rescaled if necessary,
to avoid dividing tiles.</p>
<p id="borderimg-d">Here, the image is tiled to fill the area. Extra space is distributed around the
tiles if necessary.</p>
<p>Here is the original image:</p><img src="../pics/smiley.png" width="10%" >
</div>
<style>
#borderimg-a {border: 1.5vw solid transparent; padding: 1.5vw; border-image-source: url../pics/(smiley.png);
border-image-repeat: stretch; border-image-slice: 30;}
#borderimg-b {border: 1.5vw solid transparent; padding: 1.5vw; border-image-source: url(../pics/smiley.png);
border-image-repeat: repeat; border-image-slice: 30;}
#borderimg-c {border: 1.5vw solid transparent; padding: 1.5vw; border-image-source: url(../pics/smiley.png);
border-image-repeat: round; border-image-slice: 30;}
#borderimg-d {border: 1.5vw solid transparent; padding: 1.5vw; border-image-source: url(../pics/smiley.png);
border-image-repeat: space; border-image-slice: 30; }
</style>
- specifies how to slice the image specified by border-image-source. The image is always sliced into nine sections: four corners, four edges and the middle. The "middle" part is treated as fully transparent, unless the "fill" keyword is set.
CSS syntax : border-image-slice: number | % | fill | initial | inherit;
Property values
number : the number(s) represent pixels for raster images or coordinates for vector images
% : percentages are relative to the height or width of the image
fill : causes the middle part of the image to be displayed.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
The border-image-width property can take from one to four values (top, right, bottom, and left sides). If the fourth value is omitted, it is the same as the second. If the third one is also omitted, it is the same as the first. If the second one is also omitted, it is the same as the first.
CSS syntax : border-image-width: number | % | auto | initial | inherit;
Property values
length : a length unit (px) specifying the size of the border-width
number : default value 1. Represents multiples of the corresponding border-width
% : refers to the size of the border image area: the width of the area for horizontal offsets, the height for vertical offsets.
auto : if specified, the width is the intrinsic width or height of the corresponding image slice.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
- is a shorthand property for these properties: "border-inline-width" , "border-inline-style (required)", "border-inline-color". - if values for color or width are omitted, default values will be used.
The CSS border-inline property is very similar to CSS "property border", but the border-inline property is dependent on the inline direction. The related CSS properties "writing-mode", "text-orientation" and "direction" define inline direction. This affects where the start and end of a line is and the result of the border-inline property. For pages in English, inline direction is left to right and block direction is downward.
A heading with a solid red border in the inline direction
A heading with a dotted blue border in the inline direction
A div element with a double border in the inline direction.
code:
<div>
<h1 id="H1-A">A heading with a solid red border in the inline direction</h1>
<h2 id="H2-A">A heading with a dotted blue border in the inline direction</h2>
<div id="DIV-A">A div element with a double border in the inline direction.</div>
</div>
<style>
#H1-A, #H2-A, #DIV-A {padding: 2vw 1vw;background-color: lightgreen;}
#H1-A {border-inline: 0.5vw solid red;}
#H2-A {border-inline: 0.4vw dotted blue;}
#DIV-A{border-inline: double;}
</style>
- sets the color of an element's borders in the inline direction. - for the border-inline-color property to take effect, the border-inline-style must be set
Values for the border-inline-color property can be set in different ways:
- if the border-inline-color property has two values:{border-inline-color: pink blue;} : border color at inline start is pink, border color at inline end is blue. - if the border-inline-color property has one value: {border-inline-color: blue;} : border color at inline start and end is blue.
The border-inline-color property defines the color of the borders in the inline direction.
If two values are set; the first one is for the start in the inline direction, and the second one is for the end in the inline direction.
With writing-mode property value set to 'vertical-rl', the borders affected by the border-inline-color property is on the top and bottom.
code:
<div>
<div id="DIV-B">
<p>The border-inline-color property defines the color of the borders in the inline
direction.</p>
</div><br>
<div id="DIV-C">
<p>If two values are set; the first one is for the start in the inline direction, and the
second one is for the end in the inline direction.</p>
</div><br>
<div id="DIV-D">
<p>With writing-mode property value set to 'vertical-rl', the borders affected by the
border-inline-color property is on the top and bottom.</p>
</div>
</div>
<style>
#DIV-B, #DIV-C, #DIV-D { background-color: lightgreen; padding: 3vw 1vw;
border-inline-width: 1vw;}
#DIV-B {border-inline-style: solid; inline-size: 20vw; border-inline-color: pink; }
#DIV-C {border-inline-style: solid; inline-size: 20vw; border-inline-color: pink lightblue;}
#DIV-D {border-inline-style: solid; inline-size: 20vw; writing-mode: vertical-rl;
border-inline-color: blue;}
</style>
- sets the color of an element's borders at the end in the inline direction. - for the border-inline-end-color property to take effect, the border-inline-end-style must be set
The border-inline-end-color property defines the color of the border at the end in the inline direction.
The border-inline-end-color property defines the color of the border at the end in the inline direction.
With writing-mode property value set to 'vertical-rl', the borders affected by the border-inline-end-color property is on the bottom.
code:
<div>
<div id="DIV-E">
<p>The border-inline-end-color property defines the color of the border at the end in the inline
direction.</p>
</div><br>
<div id="DIV-F">
<p>The border-inline-end-color property defines the color of the border at the end in the inline
direction.</p>
</div><br>
<div id="DIV-G">
<p>With writing-mode property value set to 'vertical-rl', the borders affected by the
border-inline-end-color property is on the bottom.</p>
</div>
</div>
<style>
#DIV-E, #DIV-F, #DIV-G { background-color: lightgreen; padding: 3vw 1vw;
border-inline-end-width: 1vw;}
#DIV-E {border-inline-end-style: solid; inline-size: 20vw; border-inline-end-color:
pink; }
#DIV-F {border-inline-end-style: solid; inline-size: 20vw; direction: rtl; border-inline-end-color:
lightblue;}
#DIV-G {border-inline-style: solid; inline-size: 20vw; writing-mode: vertical-rl; border-inline-end-color:
blue;}
</style>
- sets the style of an element's border at the end in the inline direction.
The CSS border-inline-end-style property is very similar to CSS properties "border-bottom-style", "border-left-style", "border-right-style" and "border-top-style", but the border-inline-end-style property is dependent on inline direction.
The border-inline-end-style property defines the style of the border at the end in the inline direction.
With writing-mode property value set to 'vertical-rl', the border affected by the border-inline-end-style property is on the bottom.
With writing-mode property value set to 'vertical-rl', the border affected by the border-inline-end-style property is on the bottom.
code:
<div>
<div id="DIV-H">
<p>The border-inline-end-style property defines the style of the border at the end in the
inline direction.</p>
</div><br>
<div class="grid">
<div id="DIV-I">
<p>With writing-mode property value set to 'vertical-rl', the border affected by the
border-inline-end-style property is on the bottom.</p>
</div>
<div id="DIV-J">
<p>With writing-mode property value set to 'vertical-rl', the border affected by the
border-inline-end-style property is on the bottom.</p>
</div>
</div>
</div>
<style>
#DIV-H {background-color: lightgreen; inline-size: 70%; padding: 3vw 1vw; border-inline-end-width: 1vw;
border-inline-end-style: dotted;}
#DIV-I {background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-inline-width: 0.5vw;
writing-mode: vertical-rl;border-inline-end-style: dotted;}
#DIV-J {background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-inline-width: 0.5vw;
writing-mode: vertical-lr;border-inline-end-style: dotted;}
</style>
- sets the width of an element's border at the end in the inline direction. - for the border-inline-end-width property to take effect, the border-inline-end-style property must be set.
The CSS border-inline-end-width property is very similar to CSS properties "border-bottom-width", "border-left-width", "border-right-width" and "border-top-width", but the border-inline-end-width property is dependent on inline direction.
The border-inline-end-width property defines the width of the border at the end in the inline direction.
With direction property value set to 'rtl', the 1.5vw wide border at the end in the inline direction is moved to the left side.
code:
<div>
<div id="DIV-K">
<p>The border-inline-end-width property defines the width of the border at the end in the
inline direction.</p>
</div><br>
<div id="DIV-L">
<p>With direction property value set to 'rtl', the 1.5vw wide border at the end in the
inline direction is moved to the left side.</p>
</div>
</div>en
<style>
#DIV-K {background-color: lightgreen; inline-size: 70%; padding: 3vw 1vw; border-inline-end-style: solid;
border-inline-end-width: 1vw;}
#DIV-L {background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-inline-style: solid;
direction: rtl; border-inline-end-width: 1.5vw;}
</style>
- sets the color of an element's borders at the start in the inline direction. - for the border-inline-start-color property to take effect, the border-inline-start-style must be set
The border-inline-start-color property defines the color of the border at the start in the inline direction.
The border-inline-start-color property defines the color of the border at the start in the inline direction.
With writing-mode property value set to 'vertical-rl', the borders affected by the border-inline-start-color property is on the top.
code:
<div id="DIV-M">
<p>The border-inline-start-color property defines the color of the border at the start in the inline direction.</p>
</div><br>
<div id="DIV-N">
<p>The border-inline-start-color property defines the color of the border at the start in the inline direction.</p>
</div><br>
<div id="DIV-O">
<p>With writing-mode property value set to 'vertical-rl', the borders affected by the border-inline-start-color property is on the top.</p>
</div>
</div>
<style>
#DIV-M, #DIV-N, #DIV-O { background-color: lightgreen; padding: 3vw 1vw; border-inline-start-width: 1vw;}
#DIV-M {border-inline-start-style: solid; inline-size: 20vw; border-inline-start-color: pink; }
#DIV-N {border-inline-start-style: solid; inline-size: 20vw; direction: rtl;border-inline-start-color: lightblue;}
#DIV-O {border-inline-style: solid; inline-size: 20vw; writing-mode: vertical-rl; border-inline-start-color: blue;}
</style>
- sets the style of an element's border at the start in the inline direction.
The CSS border-inline-start-style property is very similar to CSS properties "border-bottom-style", "border-left-style", "border-right-style" and "border-top-style", but the border-inline-start-style property is dependent on inline direction.
The border-inline-start-style property defines the style of the border at the start in the inline direction.
With writing-mode property value set to 'vertical-rl', the border affected by the border-inline-start-style property is on the top.
With writing-mode property value set to 'vertical-rl', the border affected by the border-inline-start-style property is on the top.
code:
<div>
<div id="DIV-P">
<p>The border-inline-start-style property defines the style of the border at the start in the inline
direction.</p>
</div><br>
<div class="grid">
<div id="DIV-Q">
<p>With writing-mode property value set to 'vertical-rl', the border affected by the
border-inline-start-style property is on the top.</p>
</div>
<div id="DIV-R">
<p>With writing-mode property value set to 'vertical-rl', the border affected by the
border-inline-start-style property is on the top.</p>
</div>
</div>
</div>
<style>
#DIV-P {background-color: lightgreen; inline-size: 70%; padding: 3vw 1vw; border-inline-start-width:
1vw; border-inline-start-style: dotted;}
#DIV-Q {background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-inline-width: 0.5vw;
writing-mode: vertical-rl;border-inline-start-style: dotted;}
#DIV-R {background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-inline-width: 0.5vw;
writing-mode: vertical-lr;border-inline-start-style: dotted;}
</style>
- sets the width of an element's border at the start in the inline direction. - for the border-inline-start-width property to take effect, the border-inline-start-style property must be set.
The CSS border-inline-start-width property is very similar to CSS properties "border-bottom-width", "border-left-width", "border-right-width" and "border-top-width", but the border-inline-start-width property is dependent on inline direction.
The border-inline-start-width property defines the width of the border at the start in the inline direction.
With direction property value set to 'rtl', the 1.5vw wide border at the start in the inline direction is moved to the right side.
code:
<div>
<div id="DIV-S">
<p>The border-inline-start-width property defines the width of the border at the start in the inline
direction.</p>
</div><br>
<div id="DIV-T">
<p>With direction property value set to 'rtl', the 1.5vw wide border at the start in the inline
direction is moved to the right side.</p>
</div>
</div>
<style>
#DIV-S {background-color: lightgreen; inline-size: 70%; padding: 3vw 1vw; border-inline-start-style:
solid; border-inline-start-width: 1vw;}
#DIV-T {background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-inline-style: solid;
direction: rtl; border-inline-start-width: 1.5vw;}
</style>
- sets the style of an element's border in the inline direction.
Values for the border-inline-style property can be set in different ways:
If the border-inline-style property has two values:{border-inline-style: solid dotted;} : border style at inline start is solid, border style at inline end is dotted. If the border-inline-style property has one value:{border-inline-style: dotted;} : border style at inline start and end is dotted
The CSS border-inline-style property is very similar to CSS properties "border-bottom-style", "border-left-style", "border-right-style" and "border-top-style", but the border-inline-style property is dependent on inline direction.
The border-inline-style property defines the style of the border at the start and end in the inline direction.
With writing-mode property value set to 'vertical-rl', the border affected by the border-inline-start-style property is on the top.
With writing-mode property value set to 'vertical-rl', the border affected by the border-inline-start-style property is on the top.
code:
<div>
<div id="DIV-U">
<p>The border-inline-style property defines the style of the border at the start and end in the
inline direction.</p>
</div><br>
<div class="grid">
<div id="DIV-V">
<p>With writing-mode property value set to 'vertical-rl', the border affected by the
border-inline-start-style property is on the top.</p>
</div>
<div id="DIV-W">
<p>With writing-mode property value set to 'vertical-rl', the border affected by the
border-inline-start-style property is on the top.</p>
</div>
</div>
</div>
<style>
#DIV-U {background-color: lightgreen; inline-size: 70%; padding: 3vw 1vw; border-inline-width: 1vw;
border-inline-style: solid;}
#DIV-V {background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-inline-width: 0.5vw;
writing-mode: vertical-rl;border-inline-style: dashed;}
#DIV-W {background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-inline-width: 0.5vw;
writing-mode: vertical-lr;border-inline-style: dashed dotted;}
</style>
- sets the width of an element's border in the inline direction. - for the border-inline-width property to take effect, the border-inline-style property must be set.
Values for the border-inline-width property can be set in different ways:
If the border-inline-width property has two values:{border-inline-width: 10px 50px;} : border width at inline start is 10px, border width at inline end is 50px. If the border-inline-width property has one value:{border-inline-width: 10px;} : border width at inline start and end is 10px
The CSS border-inline-start-width property is very similar to CSS properties "border-bottom-width", "border-left-width", "border-right-width" and "border-top-width", but the border-inline-width property is dependent on inline direction.
The border-inline-width property defines the width of the border at the start and end in the inline direction.
With direction property value set to 'rtl', the 1.5vw wide border at the start in the inline direction is moved to the right side.
If two values are set; the first one is for the start in the inline direction, and the second one is for the end in the inline direction.
code:
<div>
<div id="DIV-X">
<p>The border-inline-width property defines the width of the border at the start and end in the
inline direction.</p>
</div><br>
<div id="DIV-Y">
<p>With direction property value set to 'rtl', the 1.5vw wide border at the start in the inline
direction is moved to the right side.</p>
</div><br>
<div id="DIV-Z">
<p>If two values are set; the first one is for the start in the inline direction, and the second
one is for the end in the inline direction.</p>
</div>
</div>
<style>
#DIV-X {background-color: lightgreen; inline-size: 70%; padding: 3vw 1vw; border-inline-style: solid;
border-inline-width: 1vw;}
#DIV-Y {background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-inline-style: solid;
direction: rtl; border-inline-width: 1.5vw;}
#DIV-Z {background-color: lightgreen; inline-size: 20vw; padding: 1vw; border-inline-style: solid;
border-inline-width: 1.5vw 3vw;}
</style>
- is a shorthand property for (in the following order): "border-left-width", "border-left-style (required)", "border-left-color".
- if border-left-color is omitted, the color applied will be the color of the text.
<div>
<h1 id="H1-AA">A heading with a solid red left border</h1>
<h2 id="H2-AA">A heading with a dotted blue left border</h2>
<div id="Div-AA">A div element with a double left border.</div>
</div>
<style>
#H1-AA {border-left: 0.5vw solid red;}
#H2-AA {border-left: 0.4vw dotted blue; text-decoration: none;}
#Div-AA {border-left: double;}
</style>
Always declare the border-style or the border-left-style property before the border-left-color property. An element must have a border before you can change the color.
The border-left-color can be specified with a color name.
code:
<div>
<h1 id="H1-AB">A heading with a colored left border</h1>
<h2 id="H2-AB">A heading with a colored left border</h2>
<div id="Div-AB">The border-left-color can be specified with a color name.</div>
</div>
<style>
#H1-AB {border-left-style: solid; border-left-color: coral;}
#H2-AB {border-left-style: dotted; text-decoration: none; border-left-color: blue;}
#Div-AB {border-left-style: double; border-left-color: green;}
</style>
<div>
<h1 id="H1-AC">A heading with a dotted left border</h1>
<h2 id="H2-AC">A heading with a dashed left border</h2>
<div id="Div-AC">A div element with a grooved left border.</div>
</div>
<style>
#H1-AC {border-left-style:dotted; }
#H2-AC {border-left-style: dashed; text-decoration: none;}
#Div-AC {border-left-style: groove;}
</style>
Always declare the border-style or the border-left-style property before the border-left-width property. An element must have borders before you can change the width.
<div>
<h1 id="H1-AD">A heading with a thin left border</h1>
<h2 id="H2-AD">A heading with a thick left border</h2>
<div id="Div-AD">A div element with a medium left border.</div>
</div>
<style>
#H1-AD {border-left-style: solid; border-left-width: thin;}
#H2-AD {border-left-style: solid; border-left-width: thick; text-decoration: none;}
#Div-AD {border-left-style: solid; border-left-width: medium;}
</style>
- defines the radius of the element's corners. This property allows to add rounded corners to elements!
This property can have from one to four values :
Four values - {border-radius: 15px 50px 30px 5px;} : first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner.
Three values - {border-radius: 15px 50px 30px;} : first value applies to top-left corner, second value applies to top-right corner and bottom-left corner, and third value applies to bottom-right corner.
Two values - {border-radius: 15px 50px;} : first value applies to top-left corner and bottom-right corner, and the second value applies to top-right corner and bottom-left corner.
One value - {border-radius: 15px} : the value applies to all four corners, which are rounded equally.
The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.
The border-radius property defines the radius of the element's corners.
If two values are set; the first one is for the top-left and bottom-right corner, the second one for the top-right and bottom-left corner.
rounded corners
code:
<div>
<div id="Div-AE">
<p>The border-radius property defines the radius of the element's corners.</p>
</div><br>
<div id="Div-AF">
<p>If two values are set; the first one is for the top-left and bottom-right corner,
the second one for the top-right and bottom-left corner.</p>
</div><br>
<div id="Div-AG">
<p>rounded corners</p>
</div>
</div>
<style>
#Div-AE{border: 0.2vw solid red; padding: 1vw; border-radius: 2.5vw;}
#Div-AF{border: 0.2vw solid red; padding: 1vw; border-radius: 5vw 2vw;}
#Div-AG{border: 0.2vw solid red; padding: 1vw; border-radius: 1vw 5vw 2vw 8vw;}
</style>
- is a shorthand property for (in the following order): "border-right-width", "border-right-style (required)", "border-right-color".
- if border-right-color is omitted, the color applied will be the color of the text.
<div>
<h1 id="H1-BB">A heading with a solid red right border</h1>
<h2 id="H2-BB">A heading with a dotted blue right border</h2>
<div id="Div-BB">A div element with a double right border.</div>
</div>
<style>
#H1-BB {border-right: 0.5vw solid red;}
#H2-BB {border-right: 0.4vw dotted blue; text-decoration: none;}
#Div-BB {border-right: double;}
</style>
Always declare the border-style or the border-right-style property before the border-right-color property. An element must have a border before you can change the color.
The border-right-color can be specified with a color name.
code:
<div>
<h1 id="H1-BC">A heading with a colored right border</h1>
<h2 id="H2-BC">A heading with a colored right border</h2>
<div id="Div-BC">The border-right-color can be specified with a color name.</div>
</div>
<style>
#H1-BC {border-right-style: solid; border-right-color: coral;}
#H2-BC {border-right-style: dotted; text-decoration: none; border-right-color: blue;}
#Div-BC {border-right-style: double; border-right-color: green;}
</style>
<div>
<h1 id="H1-BD">A heading with a dotted right border</h1>
<h2 id="H2-BD">A heading with a dashed right border</h2>
<div id="Div-BD">A div element with a grooved right border.</div>
</div>
<style>
#H1-BD {border-right-style:dotted; }
#H2-BD {border-right-style: dashed; text-decoration: none;}
#Div-BD {border-right-style: groove;}
</style>
Always declare the border-style or the border-right-style property before the border-right-width property. An element must have borders before you can change the width.
<div>
<h1 id="H1-BE">A heading with a thin right border</h1>
<h2 id="H2-BE">A heading with a thick right border</h2>
<div id="Div-BE">A div element with a medium right border.</div>
</div>
<style>
#H1-BE {border-right-style: solid; border-right-width: thin;}
#H2-BE {border-right-style: solid; border-right-width: thick; text-decoration: none;}
#Div-BE {border-right-style: solid; border-right-width: medium;}
</style>
length length : specifies the distance between the borders of adjacent cells in px, cm, etc. Negative values are not allowed. If one value is specified, it defines both the horizontal and vertical spacing between cells. If two values are specified, the first sets the horizontal spacing and the second sets the vertical spacing
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
- defines the radius of the corner at the start in the block direction and end in the inline direction. Values for the border-start-end-radius property can be set in different ways:
If the border-start-end-radius property has two values: {border-start-end-radius: 10px 50px;} : radius at block start is 10px, radius at inline end is 50px. If the border-start-end-radius property has one value: {border-start-end-radius: 10px;} : radius at corner of block start and inline end is 10px
The related CSS properties "writing-mode", "text-orientation" and "direction" define block and inline directions. That is why these properties also affects the result of the border-start-end-radius property. For pages in English, inline direction is left to right and block direction is downward.
The border-start-end-radius property defines the radius of the corner at the start of block direction, and at the end of inline directions.
If two values are set; the first one is for the start in the block direction, and the second one is for the end in the inline direction.
code:
<div>
<div id="Div-BF">
<p>The border-start-end-radius property defines the radius of the corner at the start of
block direction, and at the end of inline directions.</p>
</div><br>
<div id="Div-BG">
<p>If two values are set; the first one is for the start in the block direction, and the
second one is for the end in the inline direction.</p>
</div>
</div>
<style>
#Div-BF {border: 0.2vw solid red; padding: 1vw; border-start-end-radius: 2.5vw;}
#Div-BG {border: 0.2vw solid red; padding: 1vw; border-start-end-radius: 5vw 2vw;}
</style>
- defines the radius of the corner at the end in the block direction and inline direction. Values for the border-start-start-radius property can be set in different ways:
If the border-start-start-radius property has two values: {border-start-start-radius: 10px 50px;} : radius at block end is 10px, radius at inline end is 50px. If the border-start-start-radius property has one value: {border-start-start-radius: 10px;} : radius at block end and inline end corner is 10px
The related CSS properties "writing-mode", "text-orientation" and "direction" define block and inline directions. That is why these properties also affects the result of the border-start-start-radius property. For pages in English, inline direction is left to right and block direction is downward.
The border-start-start-radius property defines the radius of the corner at the start of block direction, and at the start of inline directions.
If two values are set; the first one is for the start in the block direction, and the second one is for the start in the inline direction.
code:
<div>
<div id="Div-BH">
<p>The border-start-start-radius property defines the radius of the corner at the start of
block direction, and at the start of inline directions.</p>
</div><br>
<div id="Div-BI">
<p>If two values are set; the first one is for the start in the block direction, and the
second one is for the start in the inline direction.</p>
</div>
</div>
<style>
#Div-BH {border: 0.2vw solid red; padding: 1vw; border-start-start-radius: 2.5vw;}
#Div-BI {border: 0.2vw solid red; padding: 1vw; border-start-start-radius: 5vw 2vw;}
</style>
- sets the style of an element's four borders. This property can have from one to four values.
Examples:
{border-style: dotted solid double dashed;} :top border is dotted, right border is solid, bottom border is double, left border is dashed. {border-style: dotted solid double;} : top border is dotted, right and left borders are solid, bottom border is double. {border-style: dotted solid;} : top and bottom borders are dotted, right and left borders are solid. {border-style: dotted;} : all four borders are dotted.
<div>
<h1 id="H1-DD">A Heading with a dotted border</h1>
<div id="Div-BJ">A div element with a dotted border.</div><br>
<div id="Div-BK">A div element with a various border styles.</div>
</div>
<style>
#H1-DD {border-style: dotted;}
#Div-BJ {border-style: dotted;}
#Div-BK {border-style: dotted double groove outset;border-color: red;}
</style>
- this shorthand property sets all the top border properties in one declaration. The properties that can be set must be in the following order: "border-top-width", "border-top-style (required)" , "border-top-color". - If border-top-color is omitted, the color applied will be the color of the text.
<div>
<h2 id="H2-DE">A heading with a solid red top border</h1>
<h2 id="H2-DF">A heading with a dotted blue top border</h2>
<div id="Div-BL">A div element with a double top border.</div>
</div>
<style>
#H2-DE {border-top: 5px solid red; text-decoration: none;}
#H2-DF {border-top: 4px dotted blue; text-decoration: none;}
#Div-BL {border-top: double;}
</style>
Note: Always declare the border-style or the border-top-style property before the border-top-color property. An element must have a border before you can change the color.
The border-top-color can be specified with a color name.
code:
<div>
<h2 id="H2-DG">A heading with a colored top border</h1>
<h2 id="H2-DH">A heading with a colored top border</h2>
<div id="Div-BM">The border-top-color can be specified with a color name.</div>
</div>
<style>
#H2-DG {border-top-style:solid; border-top-color: red; text-decoration: none;}
#H2-DH {border-top-style: dashed; border-top-color:blue; text-decoration: none;}
#Div-BM {border-top-style: double; border-top-color: orange;}
</style>
The border-top-left-radius property defines the radius of the top-left corner.
If two values are set; the first one is for the top border, the second one for the left border.
code:
<div>
<div id="Div-BN">
<p>The border-top-left-radius property defines the radius of the top-left corner.</p>
</div><br>
<div id="Div-BO">
<p>If two values are set; the first one is for the top border, the second one for the
left border.</p>
</div>
</div>
<style>
#Div-BN {border: 0.2vw solid blue; padding: 1vw; border-top-left-radius: 2.5vw;}
#Div-BO {border: 0.2vw solid blue; padding: 1vw; border-top-left-radius: 5vw 2vw;}
</style>
The border-top-left-radius property defines the radius of the top-left corner.
If two values are set; the first one is for the top border, the second one for the left border.
code:
<div>
<div id="Div-BP">
<p>The border-top-left-radius property defines the radius of the top-left corner.</p>
</div><br>
<div id="Div-BQ">
<p>If two values are set; the first one is for the top border, the second one for the left border.</p>
</div>
</div>
<style>
#Div-BP {border: 0.2vw solid blue; padding: 1vw; border-top-right-radius: 2.5vw;}
#Div-BQ {border: 0.2vw solid blue; padding: 1vw; border-top-right-radius: 5vw 2vw;}
</style>
The border-top-style property defines the style of the top border.
A div element with a dotted top border.
code:
<div>
<div id="Div-BR">
<p>The border-top-style property defines the style of the top border.</p>
</div><br>
<div id="Div-BS">
<p>A div element with a dotted top border.</p>
</div>
</div>
<style>
#Div-BR {border-top-style: dashed;}
#Div-BS {border-style: solid; border-top-style: double;}
</style>
Always declare the border-style or the border-top-style property before the border-top-width property. An element must have borders before you can change the width.
The border-top-width property defines the width of the top border.
A div element with a thick top border.
code:
<div>
<div id="Div-BT">
<p>The border-top-width property defines the width of the top border.</p>
</div><br>
<div id="Div-BU">
<p>A div element with a thick top border.</p>
</div>
</div>
<style>
#Div-BT {border-top-style: solid; border-top-width: thin;}
#Div-BU {border-style: solid; border-top-width: thick;}
</style>
- sets the width of an element's four borders. This property can have from one to four values.
Examples:
{border-width: thin medium thick 10px;} : top border is thin, right border is medium, bottom border is thick, left border is 10px. {border-width: thin medium thick;} : top border is thin, right and left borders are medium,bottom border is thick. {border-width: thin medium;} : top and bottom borders are thin, right and left borders are medium. {border-width: thin;} : all four borders are thin
border-top-width property defines the width of the four borders.
A div element with a thick border.
code:
<div>
<div id="Div-BV">
<p>border-top-width property defines the width of the four borders.</p>
</div><br>
<div id="Div-BW">
<p>A div element with a thick border.</p>
</div>
</div>
<style>
#Div-BV {border-style: solid; border-width: thin thick medium 1vw;}
#Div-BW {border-style: solid; border-width: 0.2vw 1vw;}
</style>
