The Basics of Border-Radius in CSS

Border radius can be an excellent way to improve the visual effects. In addition, it can add lively effect to the webpage. However, here in this article, we are going to discuss about the cleverer ways of using the border-radius in CSS.
However, elements can be given rounded corners by the application of the border-radius in the CSS. It will be noticed if there is a change of color. Here is a simple example:

.div {
  border-radius: 10px;
  background: #BADA55;
}

And just to cover yourself for multiple browsers (Friefox, and older browsers), you should include:

.div {
  border-radius: 10px;
  background: #BADA55;
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
}

You can also create circles out of elements including images. For example, let’s say you have:

<img src="arnold.png">

You can add:

img {
border-radius: 50%;
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
}

And the result is

You can do the same for images in the background of elements, but you’ll have to play with the sizing of the elements and the subsequent clipping:

.div {
  border-radius: 20px;
  background: url(bglines.png); /* will get clipped */
}

You can also user border-radius in combination with the border property:

.div {
border-radius: 50%;
background: #666;
border: 5px solid #000;
width: 150px;
height: 150px;
}

That results in:

We’ll dive deeper into border-radius in future posts, but these are the basics!

Negative Margin Spacing Troubleshooting: CSS Newbie

The margin property of CSS defines the spacing surrounding the outside of elements. Margins have no background color and it will be transparent as well. However, the normal possible values of margin in CSS are measured in auto, length, percentage and inherit. However, in this particular article, we are going to discuss about the negative […]

Read on...

How to capitalize letters using CSS

For capitalizing all letters by using the CSS, you need to use the ‘text transform’ property. This particular property will allow the user to make the characters capitalize, uppercase and lowercase. By definition, the property of text transformation actually controls the whole method of transformation of texts. However, this article will describe the way of […]

Read on...

Organize Your CSS Code With Best Practices

Organization of the CSS style is not very easy. If you just like to throw the styles into the page and then forget about it, you will not be able to find it while editing. For editing the style, you should always use any ‘Search’ function for any id, tag or class. However, this particular […]

Read on...

The Case For CSS Sprites

Lots of techniques are available for CSS to achieve a particular result. It does mean that we can achieve the same result by applying different types of techniques. However, CSS sprites is one of the techniques developers use. This particular technique can be used, if you have a large image, which contains a set of […]

Read on...

8 Free Form Builders: Alternatives to HTML Forms

For collecting information from the people or for collecting feedback, form is the best method. Form building by HTML can be boring. However, you should try different form builders. Here we will be discussing about the best 8 alternatives of the HTML form. Google forms Google doc is well-known as an excellent alternative of Microsoft […]

Read on...

Stylize Checkboxes and Text Fields Using CSS

Adding stylish checkboxes in HTML as well as buttons can be done very easily by using the CSS. There are actually two methods of creating stylish checkboxes. One method is image based and another method is based purely on CSS. However, here we will discuss both methods of adding stylish checkboxes. Image based styling of […]

Read on...

Setting opacity of background color transparent

Opacity is a relatively new feature in CSS and is a great way to make your web pages stand out. Minor things like changing the opacity or adding text shadows look great when done in moderation. There’s two way to set the opacity of a background in CSS. The first is using the rbga property […]

Read on...

How to remove underline from links in your theme

By default in most browsers links are underlined with a text decoration. Many times you’ll want to remove this underline to make you site look better or only have the link show up when hovering over it. You’ll want modify the a element and change the text decoration to none a { text-decoration: none; } […]

Read on...

Using CSS with PHP Tutorial

Using CSS with PHP PHP is a server side language and CSS and PHP do not interact with each other. Though you can output CSS to interact with your HTML, using PHP. Using CSS with PHP is even more simple that you might think. Similar to echoing out a text string in PHP, CSS is […]

Read on...