CSS Border

CSS Border
Nikhil
Published on 2021-07-08 08:44:57

CSS 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).

css border radius

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 topright- 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;
}

Because border-radius accepts percentages, it is common to use 50% to avoid manually calculating the borderradius value:

.circle {
width: 150px;
height: 150px;
border-radius: 50%;
}

If the width and height properties are not equal, the resulting shape will be an oval rather than a circle.

Browser specific border-radius example:

-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;

CSS 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 css

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).

 

CSS 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 atutorialhub

 

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 inlinetable) 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 */
}

Also, see Tables - border-collapse documentation entry

 

CSS 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 consists 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 where border.png is an 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.

 

Creating a multi-colored border using borderimage


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 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 on the same page.

border css

(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 the right border would be the end color. If it was a bottom gradient the top border would be the gradient's start color and the bottom border would be the end color. Below is the output of a bottom 5 colored gradient.

border color

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.

border-width: 5px 0px 0px 0px;

top border css

Note that, an 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;
}

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website