Tutorial by Examples

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

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

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

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

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

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

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

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