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.
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:
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:
Because border-radius accepts percentages, it is common to use 50% to avoid manually calculating the borderradius value:
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:
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.)
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 a pseudo element:
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:
You can simply write:
These shorthands are also available for every side of an element: border-top, border-left, border-right, and border-bottom. So you can do:
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.
Also, see Tables - border-collapse documentation entry
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:
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
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.
(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.
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.
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:
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:
ATutorialHub Related Guide
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website