CSS: border-right property
This CSS tutorial explains how to use the CSS property called border-right with syntax and examples.
Description
The CSS border-right property defines the width, line style, and color of the right border of a box. It is a shorthand property for setting the border-right-width, border-right-style, and border-right-color CSS properties.
Syntax
The syntax for the border-right CSS property is:
border-right: border-right-width border-right-style border-right-color;Parameters or Arguments
border-right-width is the right border width of a box and can be one of the following:
(If border-right-width is not provided, the default is medium)
| Value | Description |
|---|---|
| fixed | Fixed value expressed in px, em, ... div { border-right: 3px; } |
| thin | Thin border-right width, which might be 1px or 2px depending on the browser div { border-right: thin; } |
| medium | Medium border-right width, which might be 3px or 4px depending on the browser div { border-right: medium; } |
| thick | Thick border-right width, which might be 5px or 6px depending on the browser div { border-right: thick; } |
border-right-style is the line style of the right border of a box and can be one of the following:
(If border-right-style is not provided, the default is none)
| Value | Description |
|---|---|
| none | No border-right (This is the default) div { border-right: none; } |
| solid | Single, straight, solid line div { border-right: solid; } |
| dotted | Series of dots div { border-right: dotted; } |
| dashed | Series of short dashes div { border-right: dashed; } |
| double | Two straight lines that total the pixel amount defined by border-right-width div { border-right: double; } |
| groove | Carved effect div { border-right: groove; } |
| ridge | 3D appearance where border-right looks like it is "coming out" (opposite of groove) div { border-right: ridge; } |
| inset | Embedded appearance div { border-right: inset; } |
| outset | Embossed appearance (opposite of inset) div { border-right: outset; } |
| hidden | Border is hidden div { border-right: hidden; } |
| inherit | Element will inherit the border-right-style from its parent element div { border-right: inherit; } |
border-right-color is the color of the right border of a box and can be one of the following:
| Value | Description |
|---|---|
| #RRGGBB | Hexadecimal representation of the border-right-color div { border-right: #FF0000; } |
| rgb() | RGB representation of the border-right-color div { border-right: rgb(255,0,0); } |
| name | Name of the border-right-color (ie: red, blue, black, white) div { border-right: red; } |
| transparent | Border is not displayed but still takes up space on the page div { border-right: transparent; } |
| inherit | Element will inherit the border-right-color from its parent element div { border-right: inherit; } |
Note
- When using the border-right property, you can provide one or all of the values (border-right-width, border-right-style, and border-right-width values) and they can be provided in any order.
- You must provide a value for the border-right-style for the right border to appear.
- See also the border-right-color, border-right-style, and border-right-width properties.
- Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.
Browser Compatibility
The CSS border-right property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the border-right property below, exploring examples of how to use this property in CSS.
For example:
div { border-right: solid; }In this CSS border-right example, we have set the line style of the right border of the <div> tag to solid. You must set the style or the right border will not appear.
Next, we'll look at a CSS border-right example where we provide the border-right-width, border-right-style, and border-right-color values.
div { border-right: 3px solid blue; }In this CSS border-right example, we have set the border-right-width to 3px, the border-right-style to solid, and the border-right-color to blue.
We could rewrite this example using the hexadecimal value for blue as follows:
div { border-right: 3px solid #0000FF; }Or we could rewrite this example using the rgb() value for blue as follows:
div { border-right: 3px solid rgb(0,0,255); }
Advertisements