border-color is a CSS property that you can use to set the color of a border. But the border-color is not enough to make the color visible. You need one more property to make it work. It’s border-style. See the CSS below: To avoid confusion, make sure you spelled “color” correctly, and it’s not colour. There are different types (border-style) of borders you can choose from. Such as solid, dotted, dashed, double, etc. For border-color, you can choose any HTML color name, hex code, RGB/RGBA. Color name examples: red, green, blue, etc. Hex code examples: #FF0000, #008000, #0000FF, etc. RGB […]
Read More →
In this post, I will give you a few sample breadcrumb navigation that I built with HTML & CSS. You’ll also get the source code of each breadcrumb. Breadcrumb navigation examples Before we start writing any code, let’s see the breadcrumb examples first. After that, you can choose any style and grab its corresponding HTML & CSS. Home Blog Web Development Flexbox Home Blog Web Development Flexbox Home Blog Web Development Flexbox Home Blog Web Development Flexbox Home Blog Web Development Flexbox Home Blog Web Development Flexbox You saw the live preview of the breadcrumbs above. These are the most […]
Read More →
In this post, I will show you how to create an accordion with HTML, CSS & JavaScript. Also, I will give you the source code of a beautifully designed accordion that you can use on your own projects. There is no CSS or JavaScript framework that I used to create this accordion. See the demo of the accordion below. Consectetur adipisicing elittaque quaerat nostrum esse? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed, ea. Illum autem quae dolore labore! Voluptate sed debitis consequatur esse rerum nemo ratione, veritatis quo quis blanditiis enim nisi molestiae. Consectetur adipisicing elit, sed do […]
Read More →
To create a simple HTML alert box, you really don’t need a large CSS framework like Bootstrap. You only need a few lines of HTML, CSS, and one line of JavaScript. In this post, I will show how you can create an alert box similar to Bootstrap but without using any framework. You’ll also get a close icon on the right side of each alert and the alert box will disappear once you click the icon. Let’s get started. Alert components using only HTML, CSS & JavaScript Before I give you the same code, see all the alert components below. […]
Read More →
The default list items are vertically aligned in a list format. To make a horizontal list, you need to write some CSS for it. In this post, I will explain & show a couple of ways to create a horizontal list with CSS. Let’s get started. Different ways to create a horizontal list with CSS In these examples, you will see different CSS properties to make a horizontal list such as display, flex, float, etc. Throughout this post, I will use the following HTML for the list items until I introduce a new markup. So keep that in mind. Using […]
Read More →
CSS gradient border is a great opportunity to make your content stand out. Throughout my website, I used gradient borders that helped me to focus on important parts of a web page. And you can do the same using them. In this post, I will give you some examples of CSS gradient borders. Also, I will show how you can create your own border styles. Let’s get started. Examples of CSS gradient border From the examples listed below, you can copy-paste my CSS and change the color values exactly the way you want. Let’s see some of the cool gradient […]
Read More →
CSS gives you huge flexibility to select one or more HTML elements exactly the way you want. Using multiple classes & IDs and making a combination of both gives you the ability to do that. But you have to know how multiple CSS selectors work together to get the most out of it. In this post, I will show how you can use multiple classes & IDs in CSS, and make a combination of these two. Also, you’ll get some real-world code examples that will give you a clear concept of using them properly. How to use multiple CSS classes […]
Read More →
It’s easy to add borders to a table but making the table rounded is a bit trickier. Wood-made rounded tables are very common but it’s rare when it comes to making them with HTML & CSS. I used the “border-radius” property to make the rounded corners but it did not work. So I took a deep dive and come up with a couple of solutions to make a table rounded with CSS (not wood). In this post, I will show you a couple of ways to make rounded tables with CSS. Also, I will show you different types of rounded […]
Read More →
You can rotate text, images, and other HTML elements using the CSS transition property. The transition has a “rotate” function that can make rotation an element clockwise or anticlockwise. In this post, I will try to make you understand the CSS rotate function in depth. And will give you some real examples. So you can take these ideas to implement on your project without much spending time on it. Let’s start. Rotate a text using CSS In order to rotate a text, your first instinct should be to give it a class or ID so you can target it easily […]
Read More →
You can make text bold using the HTML <strong> and <b> tags. But these two are not only the options. You can also make any text bold in HTML using CSS. In this post, I will show you all the possible ways to bolding text in HTML. HTML bold text – all possible ways Using <strong> tag See its output below. Using <b> tag See its output below. As you see this output is similar to the last one. Bold text using CSS font-weight property As mentioned earlier, you’re just not limited to using the HTML <strong> & <b> tags. […]
Read More →