Borders | Handy CSS

Styling the Table in CSS

Styling the table and cells using CSS, changing the border color applying padding and choosing font color as well as font alignment in the table.

Four Colors on Four sides Border

We can choose color for each side of the border to make it look better and customize it as we want in CSS3.

With new version of CSS3 we can do some whole new tricks, specifically talking about CSS3 borders we can make borders rounded, apply shadow to boxes, moreover we can also set image as a border. Let me show you how to do these things.

How to Draw Multiple Borders Using CSS

Multiple borders can be used to avoid the use of images in order to make different effects around the borders. So it will become helpful in optimization of your website. This post will simply show you how you can draw multiple borders with CSS.

How to Make Colored Borders Around Divs With CSS

Colors and Websites goes together. Beautiful color combination makes your website standout and enables you to attract more visitors toward your website. If you need to show some border around div you can also use coloring in border to match it with background and text. Lets see how.

Ways to Define Three-Sided Border in CSS

Certain HTML elements that have border by default have dull gray kind of borders that look backwards. With the help of CSS it is possible to style borders of different HTML elements with ease.

How to Create Double Boders Using CSS

It is good to learn some techniques that can improve your design outlook, sometimes little things can make a difference. Today we are showing how simple you can create a double border effect with CSS.

Styling Tables with CSS

Even though table-less designs are preferred in this age and day but still tables are useful and inevitable way to present data. You can turn classic HTML tables design to more attractive and more readable with CSS. In this post we provide some examples of styling HTML tables in CSS.

Styling Borders With CSS

With only using HTML tags it is not possible to set the borders for different elements other than tables. CSS provides a lots of properties that deals with the applying and formatting the borders making the element stand out.

Creating Shapes With CSS

Do you ever think of creating different shapes in CSS, such as triangle, rectangle, etc. Yes! It is possible to create shapes by using CSS borders properties creatively. Here we discuss some tips to do so, and also provide you example code to draw a triangle with CSS.

4 Methods to Style CSS Calendars

In many sites calendars are used for the management of date and time. A beautifully styled calendar is a plus to your website design. There are many different ways to present calendars, some prefer to use table for this purpose and other might use lists to create calendars. This tutorial presents 4 types of CSS styled calendars.

4 Methods to Make CSS 3D Buttons

With the use of CSS technology it is possible to create some eye-catching and pleasant 3D Buttons without the use of fancy graphic and images. These text-based 3D buttons of CSS are also more effective in terms of SEO. In this tutorial we presents 4 methods to make CSS 3D buttons.

background-clip

background-clip property specify on which area the background image will be filled, either border box or padding box or content box. This attribute can work with all elements.

3 Techniques Of Rounding Corners In CSS

Rounded corners is most likely and beautiful technique when designing websites. Although incoming CSS versions (standards) are making CSS properties to round corners with a single line of CSS but now-a-days there are many alternative to do this.

page-break-after

page-break-after property lets you to set how page breaks are treated after a particular element when document is going to be printed. Don’t use this property with elements whose position is absolute.

outline-style

With CSS outline-style attribute you can set many kinds of element’s outline to make them stand out. You can set outline-style values groove, double, dashed, dotted, outset, inset, etc.

min-width

With the help of min-width CSS attribute we can easily specify the minimum value for the width of particular HTML element. By default value is 0.

empty-cells

By Using empty-cells CSS property we can easily hide border edges and backgrounds when table cells are empty. This will be used for seperated borders.

border-width

border-width CSS property is use to set multiple border sides to single or different widths, you can use thin, thick, medium or any pixel value.

border-top-style

border-top-style CSS property come into play when you want to set different type of top border in navigation menu or any other elements according to design.

border-style

border-style CSS is shortcut property that can set multiple edges of borders either same or different styles. Use may differ for different browsers.

border-spacing

border-spacing CSS property determines the space between cell borders in tables, you should always use border-collapse property in addition to make it work properly.

border-right-style

border-right-style property can set different styles to border right side such as, thick, thin, hidden, groove, outset, inset, dotted, dashed, etc.

border-right-width

border-right-width property comes in handy when you want to set the width of right border of elements, you can either use thick, thin, and medium or can set any custom width.

border-collapse

With the help of border-collapse property we can set whether the table border elements are rendered or collapsed, to ignore any padding and margins.

border-color

CSS border-color property can apply borders color of elements, border must be set in order to apply border color, you can also set different border color for each side by putting color values in a single line with spaces

How to remove cell cellspacing in CSS

An attribute of table tag in HTML is cellspacing. It is use to space between different cells or (TDs) or table. However there no CSS property to handle cell spacing, but still we can use some tricks to put space between cells.