Hi there in this video we are going to look at adding borders, we're going to put a black border around it but no border on this, we're going to add rounded corners on one side, square corners on the other, it's a border and rounded corner extravaganza. Alright, so we want to do a couple of things. I added a black border around the outside of this just so that I could make this into the tutorial because you need to work out the borders. I also added around the corners that I didn't really want just to add them to the tutorial and we did it kind of cool thing about the borders is that it's rounded on one side but not on this kind of internal gaps. So let's work out how to do that. Now let's check out the documentation. Okay, so documentation, it's called borders and it's like all we've got that looks good to me. So it's under utilities borders, there's a bunch of stuff you can say border, just the top. Okay or put a border around the whole thing. There's also border colors. Okay, so I w...

ant to put a border and then a border. Let's go boarded dark so both of these are going to go on my text box. So let's go to the s code let's add it to this class here. Okay. Or this div got lots of things going on here. Now let's see if that works. Success. We've got a black liner on the outside. Let's look at the rounded parts then that should be in the same same bit. If we scroll down there we go, border radius, you've got kind of two options. You've either got just a little bit of rounded or a full circle. Okay, so you can decide whether you want rounded, which is just our rounded corners or you can do rounded circle. Okay. Actually that turns it into a full circle. There's another one called pill which kind of does that begins but leaves the long end and rounded zero. You'd only use if say one of the components has a default round. You can turn it off by making it rounded zero and you've got two sizes for these rounded corners. They look exactly the same. Okay, large and small. Not very big differences. And the other thing is is that I want to do, remember we did my rounded right and left. Okay, so we'll start with the first box would be rounded left. So we're going to apply it to now. We applied the other one to the whole kind of column For the 2nd 1 here. Um It doesn't work in this case because we've got this image. We want to apply around the image. Not the actual class. Okay, I'll show you what I mean. So we need to first of all tell it it's a border. Okay, don't forget that part. And we need to say rounded right or rounded left. Okay. And that is only going to partially work, let's have a look. Okay, because it puts around the edge of the column. That's not what I want. I want to put it around this image. Okay, so the exact same things can go on the image itself. So image source, we've got a class of fluid. Put them both on there and there we go. We've got rounded left. Okay. But square on the right. Okay. It's used a white border. Okay. But let's turn, let's make it the border large as well, which doesn't make a significant change. But there it is. Lastly, it's given it a white line around the outside. It's not what I want. So let's get rid of that default. Okay, so here, let's have a look at the border color. Okay, so not bored of color because I don't want to add a color. I want to try and you can see there we can add a border of zero. Nice. Get a little examples up there. So let's say border. So on my image here, border large, let's make it border zero and there you go. Okay, it's got a little rounded corners on the edges and there is no stroke around it. Let's do the borders on the right here. So instead of left, we're going to do it to this column here. Lots of stuff going on after border dark. It's going to be rounded left. It didn't work. That needs to be rounded. Right? Oh, lovely rounded corners. The other thing I want to do is make sure that it is a border border large, mm hmm. There you go. All right. That's it. For our exciting border video. We did some rounded corners. We added some lines around the outside. Let's get on to the next video.

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

2,000+ classes ranging from fundamentals to advanced techniques.

Bootstrap Border & Rounded Corners

Bootstrap Border & Rounded Corners

Lesson Info

119. Bootstrap Border & Rounded Corners

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

Getting div tags onto one line using Flexbox in HTML & CSS

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks