CSS Border
|
Table of content Border radius border-style Multiple border Collapse border Border-image Outline |
Border-radius
The border-radius property allows you to change the shape of the basic box model.
Every corner of an element can have up to two values, for the vertical and horizontal radius of that corner (for a
maximum of 8 values).
The first set of values defines the horizontal radius. The optional second set of values, preceded by a ‘/’ , defines the vertical radius. If only one set of values is supplied, it is used for both the vertical and horizontal radius.
border-radius: 10px 5% / 20px 25em 30px 35em;
The 10px is the horizontal radius of the top-left-and-bottom-right. And the 5% is the horizontal radius of the top-
right-and-bottom-left. The other four values after '/' are the vertical radii for top-left, top-right, bottom-right and
bottom-left.
As with many CSS properties, shorthands can be used for any or all possible values. You can therefore specify anything from one to eight values. The following shorthand allows you to set the horizontal and vertical radius of
every corner to the same value:
HTML:
<div class='box'></div>
CSS:
.box {
width: 250px;
height: 250px;
background-color: black;
border-radius: 10px;
}
Border-radius is most commonly used to convert box elements into circles. By setting the border-radius to half of
the length of a square element, a circular element is created:
.circle {
width: 200px;
height: 200px;
border-radius: 100px;
}
the top-left-and-bottom-right. And the 5% is the horizontal radius of the top-
right-and-bottom-left. The other four values after '/' are the vertical radii for top-left, top-right, bottom-right and
bottom-left.
HTML:
<div class='box'></div>
CSS:
.box {
width: 250px;
height: 250px;
background-color: black;
border-radius: 10px;
}
border-style
The border-style property sets the style of an element's border. This property can have from one to four values
(for every side of the element one value.)
Examples:
border-style: dotted;
border-style: dotted solid double dashed;
border-style can also have the values none and hidden. They have the same effect, except hidden works for
border conflict resolution for <table> elements. In a <table> with multiple borders, none has the lowest priority
(meaning in a conflict, the border would show), and hidden has the highest priority (meaning in a conflict, the
border would not show).
.…..............................
Multiple Borders
Using outline:
.div1{
border: 3px solid black;
outline: 6px solid blue;
width: 100px;
height: 100px;
margin: 20px;
}
Using box-shadow:
.div2{
border: 5px solid green;
box-shadow: 0px 0px 0px 4px #000;
width: 100px;
height: 100px;
margin: 20px;
}
Using a pseudo element:
.div3 {
position: relative;
border: 5px solid #000;
width: 100px;
height: 100px;
margin: 20px;
}
.div3:before {
content: " ";
position: absolute;
border: 5px solid blue;
z-index: -1;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
}
border (shorthands)
In most cases you want to define several border properties (border-width, border-style and border-color) for all sides of an element.
Instead of writing:
border-width: 1px;
border-style: solid;
border-color: #000;
You can simply write:
border: 1px solid #000;
These shorthands are also available for every side of an element: border-top, border-left, border-right and
border-bottom. So you can do:
border-top: 2px double #aaaaaa;
….....................................
border-collapse
The border-collapse property applies only to tables (and elements displayed as display: table or inline-
table) and sets whether the table borders are collapsed into a single border or detached as in standard HTML.
table {
border-collapse: separate; /* default */
border-spacing: 2px; /* Only works if border-collapse is separate */
}
.............................................
border-image
With the border-image property you have the possibility to set an image to be used instead of normal border
styles.
A border-image essentially consist of a
border-image-source: The path to the image to be used
border-image-slice: Specifies the offset that is used to divide the image into nine regions (four corners,
four edges and a middle)
border-image-repeat: Specifies how the images for the sides and the middle of the border image are scaled
Consider the following example wheras border.png is a image of 90x90 pixels:
border-image: url("border.png") 30 stretch;
The image will be split into nine regions with 30x30 pixels. The edges will be used as the corners of the border while
the side will be used in between. If the element is higher / wider than 30px this part of the image will be stretched.
The middle part of the image defaults to be transparent.
image
CSS
.bordered {
border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon
60%, maroon 80%, chocolate 80%); /* gradient with required colors */
border-image-slice: 1;
}
HTML
<div class='bordered'>Border on all sides</div>
The above example would produce a border that comprises of 5 different colors. The colors are defined through a linear-gradient (you can find more information about gradients in the docs). You can find more information
about border-image-slice property in the border-image example in same page.
(Note: Additional properties were added to the element for presentational purpose.)
You'd have noticed that the left border has only a single color (the start color of the gradient) while the right border
also has only a single color (the gradient's end color). This is because of the way that border image property works.
It is as though the gradient is applied to the entire box and then the colors are masked from the padding and
content areas, thus making it look as though only the border has the gradient.
Which border(s) have a single color is dependant on the gradient definition. If the gradient is a to right gradient,
the left border would be the start color of the gradient and right border would be the end color. If it was a to
bottom gradient the top border would be the gradient's start color and bottom border would be end color.
the output of a to bottom 5 colored gradient.
If the border is required only on specific sides of the element then the border-width property can be used just like
with any other normal border. For example, adding the below code would produce a border only on the top of the
element Css color
border-width: 5px 0px 0px 0px;
Note that, any element that has border-image property won't respect the border-radius (that is the border won't
curve). This is based on the below statement in the spec:
A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by
‘background-clip’).
border-[left|right|top|bottom]
The border-[left|right|top|bottom] property is used to add a border to a specific side of an element.
For example if you wanted to add a border to the left side of an element, you could do:
#element {
border-left: 1px solid black;
}
.............................................._______&&&
Outlines
Parameter
dotted - dotted outline
dashed. - dashed outline
solid - solid outline
double. - double outline
groove - 3D grooved outline, depends on the outline-color value
ridge - 3D ridged outline, depends on the outline-color value
inset - 3D inset outline, depends on the outline-color value
outset -3D outset outline, depends on the outline-color value
none. - no outline
hidden - hidden outline
Overview
Outline is a line that goes around the element, outside of the border. In contrast to border, outlines do not take any
space in the box model. So adding an outline to an element does not affect the position of the element or other
elements.
In addition, outlines can be non-rectangular in some browsers. This can happen if outline is applied on a span
element that has text with different font-size properties inside it. Unlike borders, outlines cannot have rounded
corners.
The essential parts of outline are outline-color, outline-style and outline-width.
The definition of an outline is equivalent to the definition of a border:
An outline is a line around an element. It is displayed around the margin of the element. However, it is
different from the border property.
outline: 1px solid black;
outline-style
The outline-style property is used to set the style of the outline of an element.
p {
border: 1px solid black;
outline-color:blue;
line-height:30px;
}
.p1{
outline-style: dotted;
}
.p2{
outline-style: dashed;
}
.p3{
outline-style: solid;
}
.p4{
outline-style: double;
}
.p5{
outline-style: groove;
}
.p6{
outline-style: ridge;
}
.p7{
outline-style: inset;
}
.p8{
outline-style: outset;
}
HTML
<p class="p1">A dotted outline</p>
<p class="p2">A dashed outline</p>
<p class="p3">A solid outline</p>
<p class="p4">A double outline</p>
<p class="p5">A groove outline</p>
<p class="p6">A ridge outline</p>
<p class="p7">An inset outline</p>
<p class="p8">An outset outline</p>
0 Comments